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.

Related Posts:

Comments (43)

  1. budi wrote::


    Thank You

    Tuesday, August 12, 2008 at 2:47 pm #
  2. Carl wrote::


    Doesn’t work with Java enabled, it seems?

    Saturday, August 23, 2008 at 10:03 pm #

  3. Isn’t there a way to leverage the TinyMCE editor already bundled with WP?

    (great plugin btw! making my life as an editor/publisher MUCH easier.)

    Monday, August 25, 2008 at 5:14 pm #
  4. admin wrote::


    Colin Carmichael said:
    Isn’t there a way to leverage the TinyMCE editor already bundled with WP?

    Afraid not. The TinyMCE in WordPress is seriousily hacked to work with WordPress. It makes it pretty much impossible to use outside of that context. It even makes it difficult to use something other than TinyMCE (such as NiceEdit) within WordPress. :(

    (great plugin btw! making my life as an editor/publisher MUCH easier.)

    Cool! :)

    Monday, August 25, 2008 at 8:55 pm #

  5. Thank you so much! The implementation was really easy thanks to your advices. Though you must be aware that the brackets are different that normal brackets which can cause a bug while implementing your snippet, also the comment out stuff. So i’d say try this instead (fresher snippet for fresher WP and TinyMCE):

    <script type=”text/javascript” src=”/wp-content/tinymce/jscripts/tiny_mce/tiny_mce.js”>

    tinyMCE.init({
    mode : “exact”,
    elements : “content_content”,
    theme : “advanced”
    });

    Sunday, October 19, 2008 at 2:56 pm #

  6. Geeklynews.com said:
    Though you must be aware that the brackets are different that normal brackets which can cause a bug while implementing your snippet, also the comment out stuff. So i’d say try this instead (fresher snippet for fresher WP and TinyMCE):

    <script type=”text/javascript” src=”/wp-content/tinymce/jscripts/tiny_mce/tiny_mce.js”>

    tinyMCE.init({
    mode : “exact”,
    elements : “content_content”,
    theme : “advanced”
    });

    I guess thats a good point. Me being an old-school programmer, I generally like to comment stuff.

    Monday, November 10, 2008 at 10:55 am #
  7. eckline wrote::


    How do i add a color option for the text, and how do i add the option to add an image? thanmks!

    Thursday, February 19, 2009 at 1:38 am #

  8. I’d recommend checking the TinyMCE documentation. There is probably some configuration required to turn on color options for text.

    Tuesday, February 24, 2009 at 12:26 pm #
  9. dev01 wrote::


    i tried in wordpress 2.7.1 but i think the TDO Mini Forms is not updated to work with new version of wordpress . i tried to use this http://www.blogs4tech.com/?page_id=228 but got same text area after doing all the hack

    Sunday, April 26, 2009 at 12:09 pm #

  10. dev01 said:
    i tried in wordpress 2.7.1 but i think the TDO Mini Forms is not updated to work with new version of wordpress . i tried to use this http://www.blogs4tech.com/?page_id=228 but got same text area after doing all the hack

    TDO Mini Forms does work with WordPress 2.7.1. I’m using it on the Forums right now. I’ll have to check the hack with the next release of TDO Mini Forms but I believe it should still work.

    Tuesday, May 5, 2009 at 2:07 pm #
  11. rendom wrote::


    Can i put more button on tinymce?

    Monday, August 17, 2009 at 6:08 pm #
  12. deep7 wrote::


    I don’t know if this is related to your recent updates to the plugin, Mark, but I can no longer get tinyMCE to work with my forms using this tutorial.

    I struggled with this for a while, then finally changed the mode statement to:

    mode : “textareas”,

    and now it works fine.

    just wanted to post it in case you get similar reports from other users….

    Friday, September 25, 2009 at 2:17 am #
  13. deep7 wrote::


    OK, I did some research on tinymce and figured it out.

    You have to change:
    elements : “content_content”,

    To:
    elements : “content-text-ta”,

    Mark, can you confirm that this should be the new way to call tinymce in a form?

    Thanks!

    Monday, September 28, 2009 at 2:33 am #

  14. deep7 said:
    You have to change:
    elements : “content_content”,

    To:
    elements : “content-text-ta”,

    Mark, can you confirm that this should be the new way to call tinymce in a form?

    Yes it is. With the last drop of TDOMF 0.15.4, I refactored the text areas and so it got renamed in the widget from ‘content_content’ to ‘content-text-ta’.

    Monday, September 28, 2009 at 9:05 am #
  15. Daan wrote::


    I added the tiny mce code into a text widget at the top of the form creator, so there is no need to actualy ‘hack’ the form, or unhack it over and over again when wanting to adjust or add widgets

    1. in Form Creator add text widget to the top of the form
    2. click on the configure icon
    3. paste the wysiwyg code into the text field
    4. close, save and done

    Tuesday, November 3, 2009 at 3:44 pm #
  16. Bogdan wrote::


    After doing the content-text-ta modification, it worked perfectly fine. Thank you for this! One thing – is there a way to make the TinyMCE’s control appear at the top of the content box, rather than at the bottom? Thanks!

    Thursday, November 5, 2009 at 11:56 pm #
  17. media. wrote::


    Hi

    I want to add WYSIWYG-editor to my already defined custom field. Did I need to istall and activate TDO Mini Forms plugin or just need to do 11 and 12 items of your solution?

    Regards

    Thursday, November 26, 2009 at 8:12 pm #

  18. Hi,
    We are implementing TDO with TinyMCE Advanced on our intranet for news announcements submitted by our employees. It works really great, thank you. Of course, IE, Firefox and Chrome decide to handle some things differently. Firefox does not recognize a url when pasted into the editor textarea so publishes only as text. Chrome doesn’t even see TinyMCE never-mind the active url. IE is the winner for a change and does it all very nicely.

    Now I would like to have all links open in another window or tab because we are viewing the announcements through an iframe. Can you direct me to where I can either add a target=”_blank” or an onclick javascript?
    Thanks again,
    Trula

    Tuesday, January 26, 2010 at 2:04 am #
  19. jerome wrote::


    it doesn’t work for me.
    When i click on the saved button on hack tdo mini form page admin, it send a white page… and there is no saved form files… i see that when i re-click on the hack… nothing was changed on the file…

    how can i realy personnalize tdo mf ?

    Thursday, February 11, 2010 at 7:45 pm #

  20. @Trula Fountaine What are you trying to achieve? Is it that the submitted post has the links automatically modified to have the target=”blank” in it? (You can do that outside the scope of the tdo-mini-forms plugin…)

    @jerome Do you happen to be using Chrome? I’ve been getting reports of problems using Chrome with some of the UI.

    Tuesday, March 2, 2010 at 9:46 am #
  21. jerome wrote::


    using it with chrome, firefox or safari is the same for me (so firefox seems to be the best for all plugins i run on wordpress and i use it for WP test).

    Tuesday, March 2, 2010 at 4:55 pm #
  22. LilMina wrote::


    I cant get it to work right, it appears but missing buttons on both, simple and advancet version. But NicEdit works fine as long as i use their “hostet” script :) .

    Tuesday, March 2, 2010 at 10:56 pm #
  23. Bert wrote::


    I have had no luck with this. Can’t get Quicktags or tiny_mce to show up on my form.

    Saturday, May 8, 2010 at 7:04 am #
  24. Nick M wrote::


    I tried both the “content-text-ta” and “textareas” changes and neither worked. I also tried putting the Tiny MCE code in a text widget instead of using the hack method. Any advice?

    Sunday, May 16, 2010 at 8:22 pm #

  25. Thanx for the tutorial. Works like a charm.

    Monday, June 14, 2010 at 3:17 am #
  26. Andrew wrote::


    I managed to link together TinyMCE and AJAX version of TDO forms!
    You just have to add one line in the beginning of the function tdomfSubmit%%FORMID%%(action).
    Add this: tinyMCE.triggerSave(true,true);

    You can read about this general form issue here: http://www.crossedconnections.org/w/?p=88

    Friday, September 10, 2010 at 2:43 pm #
  27. Aaron wrote::


    I want to scream. This is not working. I uploaded the folder, changed file permissions(i host with hostgator)went to my form and made sure the ajax was turned off. Then I went to the content widget and unchecked the boxes you described and then saved. Then I copied the code and pasted it in the hack area right at the top and saved.

    I click on the edit post button and I can edit the post but I dont have any buttons from the tinymce showing. I really could use some help on this.

    : (

    Sunday, September 19, 2010 at 3:35 am #
  28. lochoe wrote::


    i use NicEdit.. using this code replace tinymce code like above

    //

    change ur path to make it work

    Sunday, September 19, 2010 at 9:51 am #
  29. lochoe wrote::



    <script type="text/javascript" src="/wp-content/nicEdit/nicEdit.js">
    //<![CDATA[
    bkLib.onDomLoaded(function() { new nicEditor({iconsPath : '/wp-content/nicEdit/nicEditorIcons.gif'}).panelInstance('content-text-ta'); });
    //]]>



    Sunday, September 19, 2010 at 9:56 am #
  30. marcy wrote::


    why not just plug in
    bkLib.onDomLoaded(nicEditors.allTextAreas);

    for nice edit? easily puts in wysiwyg editor…

    Tuesday, November 2, 2010 at 6:26 am #
  31. marcy wrote::


    crap I meant,
    bkLib.onDomLoaded(nicEditors.allTextAreas);


    Tuesday, November 2, 2010 at 6:26 am #
  32. marcy wrote::


    ach ok I give up, http://nicedit.com/ — code on the right.

    Tuesday, November 2, 2010 at 6:27 am #
  33. Fernando wrote::


    I cant make it work, this is what Im pasting:

    tinyMCE.init({
    mode : “exact”,
    elements : “content-text-ta”,
    theme : “advanced”
    });

    Saturday, November 6, 2010 at 7:59 pm #
  34. Fernando wrote::



    tinyMCE.init({
    mode : “exact”,
    elements : “content-text-ta”,
    theme : “advanced”
    });

    This is what Im using, the path is ok, the 777 tinymce folder set up, and ajax, quicktag and resticted disabled.

    Whats going on?

    http://tinyurl.com/2bkxlfg

    Saturday, November 6, 2010 at 8:01 pm #
  35. tech wrote::


    good job! I try to use TiniMCE dont work, but now i try again :)

    Thursday, February 24, 2011 at 9:27 pm #
  36. Bryon Gunter wrote::


    All you have to do is past this nicedit code on the page you have your form and all textareas on the page will be converted to niceditors.

    bkLib.onDomLoaded(nicEditors.allTextAreas);
    Enjoy

    Thursday, March 24, 2011 at 12:32 am #
  37. bery wrote::


    @Andrew (26th reply)

    love you dude, saved my day, though i still needed some time to place that line as i assumed it was needed in tdomf-form-ajax.php :D

    so, to make TDO Ajax compatible with TinyMCE the file that needs to be edited is:

    tdo-mini-forms/include/tdomf-form.php

    for version 0.13.9 (build 56) of TDO, search for line 1340

    function tdomfSubmit$form_id_safe(action) {

    make a space right below and paste :

    tinyMCE.triggerSave(true,true);

    all done :)

    Friday, April 29, 2011 at 5:38 pm #
  38. navinder wrote::


    Hi I have done everything suggested here:
    uploading the tinymce script and then adding js code to form hacker, disabling suggested button on form options but no result.
    Also, I made changes to tdomf-forms.php file.
    Nothing seems to work for me. Any other suggestion will be appreciated.
    Thanks

    Tuesday, May 31, 2011 at 7:22 pm #
  39. intoxi-hd wrote::


    Dont´t work… i treid the TuT in a a few ways, it didnt work! how i could get the TinyMCE for Posts?

    Monday, June 13, 2011 at 12:40 pm #
  40. ANGELA wrote::


    I am using TinyMCE in my TDOMF everything is fine except “insert” button. I hope it can insert file (image) from local computer (local hard drive), not URL. when click submit, those files upload with post togather. Inserted files is inserted in post, not attached.
    Anyone can help me??!!
    Thank in advance!

    Thursday, July 7, 2011 at 6:01 pm #
  41. ANGELA wrote::


    Hi,
    I try nicEdit, but I don’t know how to make it work.
    1. I downloaded and put “demos” folder, “nicEdit.js” and “nicEditorIcons” 3 items in …wp-content/nicEdit/ folder.
    2. I put “bkLib.onDomLoaded(nicEditors.allTextAreas);” in TDOMF, but it doesn’t work.

    who can help me?
    Bryon Gunter, how did you do,can you share here?
    Thanks.

    Thursday, July 7, 2011 at 6:46 pm #
  42. Charlie Morton wrote::


    I can’t get it to work on mine, nothing changes.

    Saturday, August 20, 2011 at 4:11 pm #
  43. Cadeau coquin wrote::


    you have to remplace
    content_content by
    content-text-ta

    and it’s work ;)

    Monday, October 17, 2011 at 11:07 am #

Trackbacks/Pingbacks (2)

  1. Recent Links Tagged With "permissions" - JabberTags on Saturday, November 8, 2008 at 7:04 pm


    [...] public links >> permissions Making the content field WYSIWYG in TDO Mini Forms (using TinyMCE) Saved by milkphat on Fri 07-11-2008 No Permissions too. Saved by newman32888 on Sat 01-11-2008 [...]

  2. 5 Post from Front-end Plugins for WordPress @ WMWeblog on Tuesday, June 7, 2011 at 8:22 am


    [...] fine. Unfortunately it does lack a WYSIWYG editor – however this may be added as described here. This is a FREE [...]