For a recent project I was asked to build a wizard style interface (among other things) for entering form data. The only requirement the client was adamant about was that there should be some WYSIWYG editor integration. Although the project was primarily a PHP based solution, I couldn’t resist the urge to give the end-users a nice experience with some AJAX. So began my experience with the wonderful world of WYSIWYG editor integration. This is a short post on some of the things I encountered.

I originally wanted to add CKEditor to my project for some text areas, but their integration with jQuery (and in particular jQuery Forms) is not quite there yet. After trying out a number of editors, I decided to go with jHtmlArea due mainly to it’s integration with jQuery and clean “look.” I thought WYSIWYG integration would be a simple process that wouldn’t involve much code work on my end. As such, my project was basically done (AJAX based wizard setup and working.) All I had left to do was integrate the editor on a number of textboxes.

One thing I found with nearly every WYSIWYG editor out there is that the documentation is what I would consider lacking. I was hoping for a solution that was basically plug and play but that was not the case with any of the editors I found. Many (including jHtmlArea) did not even bother to list methods or attributes. Regardless I kept with it and eventually got the editor working with multiple instances (thought hidden with wizard interface) on a single form. There were some obstacles as this (and many other WYSIWYG editors) are Iframes which replace the textarea. This was new to me as I have never really worked with them. As many know IFrames can be finicky, particularly when using a lot of Javascript/AJAX to show and hide elements of a page. Once I got all the instances working, I was excited to see them all spread throughout my wizard. That is until I tried clicking in them to enter text… they were unable to be clicked!

Through a few hours of frustration I was able to determine that the editor could not be added to a textbox when the page loaded. Rather, each editor had to be activated once that “step” in the wizard was activated. Basically the AJAX wizard had to be setup and I had to attach events as the user moved through the wizard in order to initialize them. I also had to add code to destroy the editors once a user navigated to a different part in the wizard. Frustration! I thought I had it all working until I added in the jQuery form submit.

I placed the form submission code into my project (a jQuery forms AJAX get submission to an external PHP page.) I tested and… nothing. Every field that wasn’t a textarea was posting fine, but the textareas I had added jHtmlAreas to were not posting. Many var_dumps later (which conveniently I can post with jQuery forms target parameter!) I was stumped. Keep in mind I am new to adding WYSIWYG editors to my own projects. I eventually determined (with the help of firebug and some blood, sweat, and tears,) that jHtmlArea (and about every other editor out there) don’t necessarily “save” what you enter to the textarea they are replacing. Once I knew what the problem was it was a bit of simple jQuery to fix the problem. Here is what I did.

1
2

function updateText(save){$(save).val($(save).htmlarea("toHtmlString"));};
function submitForm(){var options = {target:'#ajax-message', url:'external.php'};$("#form-name").ajaxSubmit(options);return false;};

Breakdown

Alright, basically these are two function. Whenever I need to submit the form, first the function on line 1 must be called. The function takes 1 parameter. This is the Id of the textarea as a string( I pass in like “#textarea-id”). We set the value of the the textarea (remember it is disabled/hidden by the WYSIWYG editor) to the value of the htmlarea (this is a jHtmlArea function) as an Html String. Passing htmlarea the “toHtmlString” parameter tells jHtmlArea what you are trying to do. Once that is done, you are free to call the 2nd function which is really just a standard jQuery forms AJAX submission. It is worth noting I tried to do this by attaching a listener to form pre-serialize but was unable to get the textarea to update before the AJAX was posting.

That’s all it took! I hope you find this useful and that it saves you a couple hours of time!

AJAX · css · development · Javascript · jQuery · jQuery UI · PHP

4 comments

<< Yii Framework – Initial Install

Using jQuery to Add Minimize/Maximize to WordPress Sidebar Widgets >>