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.
Comments (43)
Thank You
Doesn’t work with Java enabled, it seems?
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.)
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.
Cool!
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”
});
I guess thats a good point. Me being an old-school programmer, I generally like to comment stuff.
How do i add a color option for the text, and how do i add the option to add an image? thanmks!
I’d recommend checking the TinyMCE documentation. There is probably some configuration required to turn on color options for text.
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.
Can i put more button on tinymce?
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….
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!
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’.
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
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!
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
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
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 ?
@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.
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).
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
.
I have had no luck with this. Can’t get Quicktags or tiny_mce to show up on my form.
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?
Thanx for the tutorial. Works like a charm.
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
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.
: (
i use NicEdit.. using this code replace tinymce code like above
//
change ur path to make it work
<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'); });
//]]>
why not just plug in
bkLib.onDomLoaded(nicEditors.allTextAreas);
for nice edit? easily puts in wysiwyg editor…
crap I meant,
bkLib.onDomLoaded(nicEditors.allTextAreas);
ach ok I give up, http://nicedit.com/ — code on the right.
I cant make it work, this is what Im pasting:
tinyMCE.init({
mode : “exact”,
elements : “content-text-ta”,
theme : “advanced”
});
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
good job! I try to use TiniMCE dont work, but now i try again
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
@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
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
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
Dont´t work… i treid the TuT in a a few ways, it didnt work! how i could get the TinyMCE for Posts?
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!
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.
I can’t get it to work on mine, nothing changes.
you have to remplace
content_content by
content-text-ta
and it’s work
Trackbacks/Pingbacks (2)
[...] 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 [...]
[...] fine. Unfortunately it does lack a WYSIWYG editor – however this may be added as described here. This is a FREE [...]