1. Download widgEditor (latest version)
2. Edit the widgEditor.js file as shown below if using AJAX
3. Copy the widgEditor.js file into your public/javascripts folder
4. Copy the widgEditor.css file into your applications public/stylesheets folder.
5. Copy all the images from the widgEditor folder to your public/images folder.
6. Include the javascript and css files in your layout file.
7. Give any text field you want to be an editor field a class of “widgEditor”.
Example:
%= stylesheet_link_tag 'widgEditor' %>
%= javascript_include_tag "widgEditor" %>
%= text_area 'profile', 'about', :cols => "50", :rows=>"4", :class=>"widgEditor" %>
Using AJAX and WidgEditor
You'll need to modify widgEditor.js for AJAX. WidgEditor modifies your form submit function to ensure that a clean HTML copy of your input gets submitted. You need to change this so that it handles our AJAX/Javascript forms. In the widgEditor.prototype.modifyFormSubmit function, change the line that reads:
from: oldOnsubmit = theForm.onsubmit;
to: theForm.oldOnsubmit = theForm.onsubmit;
Then just a few lines below in the new onSubmit function, change the oldOnsubmit() function call to
from: return oldOnsubmit();
to: return theForm.oldOnsubmit()