Integrate TinyMCE into Interakt and ADDT projects

With the advances in technology and improved security in the new and updated browsers and java environments, the time has come to replace the KTML WYSIWYG editor with something else.

This is an article describing the upgrade from KTML to TinyMCE for Interakt and ADDT projects. Keep in mind that you will need some basic coding knowledge to be able to do this as there is no wizard that integrated TinyMCE automatically into your projects.

Upgrading your KTML installation to TinyMCE is really easy and shouldn't be an issue.

1. First download TinyMCE here
2. Install and test TinyMCE according to the TinyMCE Installation documentation
3. Open your KTML integrated page in your version of Dreamweaver
4. Add the path to your TinyMCE installation in the heading section of your page

   <scripttype="text/javascript"src="../jscripts/tiny_mce/tiny_mce.js"></script>

5. Add the code that will run the TinyMCE editor on your page

   	<scripttype="text/javascript"> TintMCE.init({ mode :"textareas" editor_selector : "art_content", //This is the id of your text area }); </script>

6. There are a lot more that can be configured for TinyMCE but I will leave that to you. It is beyond the scope of this article to even attempt to discuss the basic options. It is well documented in the Tiny MCE documentation and as I said earlier, it shouldn't be a problem for anyone.
7. Remove the KTML server behaviour from the Server Behaviours panel. (Make sure to keep a backup of the original file)
8. When initially integrating KTML it takes your text area and replaces it with a hidden area.

   <input type="hidden"

   We need to change this back to a textarea and give it an ID so that TinyMCE can execute on that specific text area only
9. Locate the line where your KTML editor used to be. Will look something similar to this one:

   	<input type="hidden" name="art_content_<?php echo $cnt1; ?>" id="art_content_<?php echo $cnt1; ?>" value="<?php echo ($row_rsint_articles['art_content']); ?>" size="32" />

10. Change it to something similar to this one:

    	<textarea  class="art_content" rows="20" style="width:100%" name="art_content_<?php echo $cnt1; ?>" id="art_content_<?php echo $cnt1; ?>"><?php echo ($row_rsint_articles['art_content']); ?></textarea>

11. Save and upload your file