Our CityGates app uses the YUI WYSIWYG Rich Text Editor to for all large text areas. Unfortunately, it does not have code / source editing support out of the box. To implement it, you must use some custom code to toggle the textarea / WYSIWYG visibility.
The example from YUI does not use handleSubmit. This means that when a user submits the form from the WYSIWYG editor the textarea does not get updated with the modified information from the iframe when the form is submitted. The user must toggle to the code view to trigger the update to the textarea. Result: a broken WYSIWYG editor.
See example.
The obvious solution: set handleSubmit to “true”. But this causes the converse bad behavior to kick in: When submitting from the code view, the textarea is updated with outdated information from the iframe before the form is submitted. The user must toggle to the WYSIWYG view to update the WYSIWYG. Result: a broken code editor.
See example.
This is what we had setup, and our users were starting to notice.
So a couple of weeks ago I spent some time trying to figure out what was going on, and figured out a crude way to toggle between the handleSubmit behaviors when the user toggles between the views. It isn’t very pretty, but it works.
See solution.
I’m looking forward to when this gets integrated into the final RTE.
Side Note on Our Choice of Editor
We chose to use the YUI RTE because of it’s ability to integrate into any backend system and support image upload and inserting. We love using TinyMCE and their slick uploader on PHP projects, but CityGates is Ruby on Rails.
Updated April 23, 2009
jQuery Cycle plugin is fantastic. However, there is a little bit of inconsistantcy when using it as a left/right slideshow. You click the next arrow, it goes right. You click the previous arrow, it goes left right. The following code allows you to have different effects based on previous/ next button clicks.
Demo
jQuery(document).ready(function(){
$('#blink_headlines').cycle({
fx: 'scrollBothWays',
next: '#cycle_next_blue',
prev: '#cycle_prev_blue',
speed: 1000,
timeout: 0,
pause: 1,
easeIn: 'easeOutBack',
easeOut: 'easeOutBack'
});
});
$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
// custom transition fn (trying to get it to scroll forward and backward)
opts.fxFn = function(curr, next, opts, cb, fwd) {
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.animIn = { left: 0 };
if(fwd){
opts.cssBefore= { left: w, top: 0 };
opts.animOut = { left: 0-w };
}else{
opts.cssBefore= { left: -w, top: 0 };
opts.animOut = { left: w };
};
var $l = $(curr), $n = $(next);
var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;
$n.css(opts.cssBefore);
var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};
$l.animate(animOut, speedOut, easeOut, function() {
if (opts.cssAfter) $l.css(opts.cssAfter);
if (!opts.sync) fn();
});
if (opts.sync) fn();
};
};
Solved:
If using capistrano and you have a symlinked shared directory which exists between deployments.
set preview.wwwroot to /var/www/apps/application/shared/
and filesystem.rootpath to /var/www/apps/application/shared/system
(assuming you want to save files in system).
This avoids the symlinks and allows tinymce to translate the paths properly.
-via pyrat
