WYSIWYG and Comments

tinyMCE on comment form I had previously written on how to add quicktags to the comment form. This tutorial, however, will show you how to add a WYSIWYG (What You See Is What You Get) editor to the comment form. The WYSIWYG editor in question is tinyMCE, the same one used in EnhancedEntryEditing. Of the various WYSIWYG editors available, I felt that tinyMCE was the best in terms of flexibility and options and the easiest to get started with!

First things first, you will need to download the latest version of tinyMCE and extract it to a suitable location on your server (EnhancedEntryEditing plugin users, already have tinyMCE in /mt-static/plugins/Ajaxify/tinymce/).

Next, you'll have to add the tinyMCE code to your Individual Entry Archive template (and any others where you have a comment form displaying and wish for tinyMCE to kick in). It can be as simple as the following (make sure that you change the path to point to where you've extracted tinyMCE):

<script type="text/javascript" src="http://www.domain.com/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!--
tinyMCE.init({
    mode : "textareas",
    theme : "simple",
        safari_warning: false
    });
//-->
</script>

which will create a tinyMCE editor as shown on this page. The beauty of tinyMCE is the amount of tweaks you can apply to it to ensure that it behaves exactly like you want it to. On Movalog, I use the following which I find works very well

<script type="text/javascript" src="http://www.domain.com/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!--
tinyMCE.init({
        mode : "exact",
        elements : "text",
        theme : "advanced",
        plugins : "iespell, emotions, inlinepopups",
        theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,separator,emotions,iespell,code",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],span[class|align|style]",
        force_p_newlines : true,
        relative_urls : false,
        remove_script_host : false,
        button_tile_map : true,
        ask : false,
        auto_cleanup_word : true,
        theme_advanced_path_location : "bottom",
        theme_advanced_resizing : true, 
        theme_advanced_resize_horizontal : false,
        safari_warning: false
});
//-->
</script>

8 Comments

Joe Grossberg said:
on Nov 4, 2005 9:01 PM | Reply

    

 

FYI, dispite disabling images, you're you're vulnerable to cross-site scripting (XSS) ... I could have made that some pr0n.

You might want  to reconsider this feature.

Arvind Satyanarayan said:
on Nov 4, 2005 9:09 PM | Reply

Actually your comment was moderated and as you can see from your comment, the attempt at XSS didn't work thanks to MT's Sanitize feature Its those controls that determine whether XSS can occur, not tinyMCE directly.

Joe Grossberg said:
on Nov 5, 2005 6:07 AM | Reply

Ah, good job! That XSS/CSS trick is often overlooked.

I didn't notice the moderation before submitting the comment.

salguod said:
on Nov 7, 2005 9:42 PM | Reply

THis sounds cool, something to think about when I revamp my site for MT 3.2.

BTW - Using IE at work and the comment box doesn't appear on the individuall archive. I had to hit 'preview' to get a box to type in.

Also, all the blockquotes with code spill outside of the white center column to the right, under the blue border. The side to side scroll thing that apears in FireFox doesn't work in IE.

Yehudit said:
on Dec 10, 2005 3:08 AM | Reply

FYI - WYSIWYG Editor doesn't work with Firefox 1.5 / MT 3.2. It freezes the entry fields and erases what you have there if you try to fiddle with it. I lost two posts that had already been published with Firefox 1.0.6 / MT 3.2.

I took out all the updates of the extensions I had been using with Firefox 1.0.6 so I am pretty sure it was Firefox 1.5 itself. When I restored Firefox 1.0.6 with its settings everything was okay again.

This is all on a Mac, I don't know if it would be different with Windows.

I went to WYSIWYG Editor because I changed to dynamic publishing and Textile wouldn't work then. I like WYSIWYG Editor but it's slow and I would be happy to have Textile, which I installed in the first place to get rid of junk type when I pasted in text from websites. WYSIWYG Editor is more bells and whistles than I need, really. And I would like to be able to customize it, use different items from the full feature set. I understand the MT plugin doesn't support that.

Anyway, check out the Firefox reaction.

contact issuses said:
on Jan 22, 2007 11:16 AM | Reply

I'm making a private script and it sends customer information to the owner contact script contact us script and when i test it and apply my own email as the admin contact i for ex type is "TEST" and its in BOLD and when i receive the email it displays TEST any help would be nice..... no URLS yet due to teh script being a paid script I'm making for someone

update said:
on Jan 22, 2007 11:19 AM | Reply

I'm the guy who wrote the comment up.

seeing as the Test is showing bold it shows me the following isntead of it being bold

TEST

Toki said:
on Jun 6, 2008 11:40 AM | Reply

tinyMCE is a bit hard.