I over complicated things in my previous solution, and found a better solution while trying to get the WYSIWYG editor to work inside an AJAX form using rails’ remote_form_for.
Using the YUI editor example, set handleSubmit to false and add this right after the MyEditor.render();
// Nate's better Handle Submit
function myHandleFormSubmit(e){
if(state == 'off') {
myEditor.cleanHTML();
};
};
Event.on(myEditor.get('element').form, 'submit', myHandleFormSubmit, myEditor, true);
When doing this and using a AJAX form, try this:
// Nate's better Handle Submit (AJAX version)
function myHandleFormSubmit(e){
if(state == 'off') {
myEditor.cleanHTML();
};
Connect.setForm(e.target);
Connect.asyncRequest('POST', e.target.action, callback, '_method=put');
Event.stopEvent(e);
};
var handleSuccess = function(o){ eval(o.responseText); };
var callback = { success:handleSuccess };
Event.on(myEditor.get('element').form, 'submit', myHandleFormSubmit, myEditor, true);
Hope this helps
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
