In one my projects, I had to change a html textarea into an editor where you can decorate the text bold, italic,underlined, etc just like you could composing an email. I had trouble finding the term for this kind of editor but I finally found it, it is a WYSIWYG editor. Googling “javascript editor” was a dumb thing to do.

After seconds searching for WYSIWYG editor codes, I stumbled upon 2 platforms, TinyMCE and NicEdit. For the project, I used Zend Framework so I googled on how to integrate those 2 platforms with Zend Framework. The first result that came up was Zend + TinyMCE, an all detailed tutorial I had hoped for. Turns out this was not my luck as I followed all the steps but the form didn’t show at all on my view file. So I changed my focus on NicEdit. There was not a lot of documentation on how to implement the codes, especially integrating it Zend. But I downloaded the files and looked at the examples. It was A LOT easier than TinyMCE. Here’s how you integrate Zend with NicEdit:

1. The first thing you should do is, of course, download the file here.

2. Extract it and copy the file nicEdit.js and nicEditorIcons.gif to your /public/js. Don’t forget to edit the iconsPath (line 31) in the nicEdit.js.

3. Include nicEdit.js to your layout.phtml

4. And still in your layout.phtml, add one of these below codes. These codes will change your <textarea> html tag with the NicEdit editor. You could change all the <textarea> html tags or a specific one by including the <textarea> id.

Code to change all textareas:

Code to change a specific textarea:

5. You could also change the configuration of the editor. For example, you just want the bold-italic-underline buttons. For the complete configuration see here.

6. Go on to the browser and we’re done! All of those Zend_Form_Element_Textarea will be changed to NicEdit editor! Basically if you still can’t get it right, you should look at the examples. They’re very easy to learn from. I hope this could help you who are looking for a WYSIWYG for Zend!