How To: Making the content field WYSIWYG in TDO Mini Forms (using TinyMCE)


It’s becoming a common query about how to make the content field in a TDO Mini Forms WYSIWYG (”What-You-See-Is-What-You-Get”). A WYSIWYG editor is where you see that your input is bold when you set it to bold, instead of seeing it plain with bold tags around the text. This tutorial will run you through quickly how to set this up.

Update #1: There is a bug with this tutorial. There is an incompatiblity between the AJAX code in TDOMF and using TinyMCE. Please disable AJAX before proceeding with this tutorial. If you have already done this, please disable AJAX. Then reset the form and then re-do the steps in this tutorial.

There are tons of javascript implementations of this that can change a normal HTML textarea into one of these WYSIWYG editors such as TinyMCE or NiceEdit. The post content field (and Custom Fields set to Text Area) use the standard textarea element and so can be “skinned” by these libraries quite easily. This is why I haven’t really integrated one of these libraries into TDOMF, I don’t want to restrict user choice and I also don’t want the huge bloat. You could, for example, use the same installation of TinyMCE to skin your comments input form as well as your TDOMF form. However I’m constantly asked how to do it. So lets take TinyMCE, and run though how you might add it to your TDO Mini Forms form.

1. Download latest version from http://tinymce.moxiecode.com/

2. Unpack the tinymce_<ver>.zip

3. Using an FTP client, upload the contents of jscripts (i.e. the tiny_mce folder) to your wordpress site. Best place to do this is under wp-content (i.e. wp-content/tiny_mce).

4. Make sure its readable from the web. You may have to set the permissions using chmod 755 or chmod 777 on the directory and it’s contents depending on your host configuration. You can probably do this from your FTP client.

5. Now, you need a form with a Content widget it on it. If you use the default, unmodified form, you will have one. If not…

5.1. Go to the “Form Widgets” page.

5.2. Drag and drop the Content Widget from “Available Widgets” to “Your Form”.

5.3. Click on the icon beside “Content” and disable/uncheck the “Use Quicktags” and “Restrict Tags” options if they are checked. You can perform any other customisation of the “Content” Widget here.

5.4. Do any other widget customisation and then click “Save Changes”.

6. Now go to the “Form Manager and Options” and go to the options page for your Form. Make sure that “Use AJAX” is unchecked. (With the current version of TDOMF, the AJAX code is incompatible with the TinyMCE scripts).

7. Now go to the Form Hacker and add this to the top:

<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo get_bloginfo('wpurl'); ?>/wp-content/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "content_content",
theme : "simple"
});
</script>
<!-- /TinyMCE -->

Save the hacked form.

8. View your form. The Post Content now should have a WYSIWYG editor!

I used the “simple theme” in this tutorial. TinyMCE supports more advanced editor and other options, so please check the TinyMCE documentation and examples.

And NO! You cannot use the TinyMCE editor that is built into Wordpress. The Wordpress TinyMCE has been seriously hacked to work with the Wordpress UI and cannot be used independently.

You can also extend this approach to use TinyMCE for Custom Fields.

9. Add a Custom Field widget to your Form using “Form Widgets”. Set the Custom Field “Type” to “Text Area”. Disable “Use Quicktags” and “Restrict Tags” options. Save the widgets.

10. On the “Form Hacker” use the “Reset” button to pick up the latest changes.

11. Now scan the code of the form for the Custom Field textarea tag. It should be something like this:

<textarea title="true" rows="10" cols="40" name="customfields-textarea-1" id="customfields-textarea-1" ><?php echo htmlentities($value,ENT_NOQUOTES,get_bloginfo('charset')); ?></textarea>

Please note the name of the custom field textarea element. In this case it’s customfields-textarea-1.

12. Now at the top of the form add this:

<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo get_bloginfo('wpurl'); ?>/wp-content/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
   tinyMCE.init({
      mode : "exact",
      elements : "content_content,customfields-textarea-1",
      theme : "simple"
   });
</script>
<!-- /TinyMCE -->

Note that I’ve appended the name of the textarea to the “elements” array.

13. Save the hacked form.

14. View your form. Now your content and your custom field widget use TinyMCE.

If you want to configure TinyMCE in even more complicated ways, please refer to the TinyMCE documentation. You can, for example, configure a Custom Field differently to the post content, by having the tinyMCE.init called separately before the different elements. In a similar way, you can add WYSIWYG editor to your comments, if you are so inclined.

Any questions and queries are probably best served on the TDOMF support forum. If you did find this helpful, please consider dropping me a few euros, thank you.