January 8, 2009

need a simple and easy wysiwyg editor?

If you’re already smart enough to be using jquery for your projects (and i know you are cuz you’re clearly a bright developer) then i strongly recommend jwysiwyg.

I’ve implemented a bunch of wysiwyg editors over the years and its almost always painful. Symfony with TinyMCE is a headache with over 2mb of files introduced to your project. I wanted to avoid any sort of extra work or hassles on the project I’m on and we only needed the simplest editor we could get.

its worth noting the less editing options you give the better. Inexperienced users + text editors = serious headaches.

though the site gives no documentation to speak of setup was breezy simple. do the following:

  • download the plugin.
  • copy the js to your js folder, the css to your css folder, the controls gif to your images folder
  • add the relevant css + js declarations to your header to pull them into the page
  • update the control image location in the css file to point to where you actually keep your images (if you see no controls once its running this is set wrong)
  • add the code to your jquey file
  • add the id whysiwyg to your form element. (you can use classes if you prefer, just update the above jquery selector to look for .wysiwyg instead of #wysiwyg.
  • you can set rows and columns for the html input to determine the size of the editor

viola. In less time than it took me to write this you have a good rich text editor. who loves jquery!