How to combine Jot and TinyMCE?

33 Posts

deTuinman Reply #1, 15 years ago

There are many topics about a way how to mix jot with tinymce or other editors, but none had the right solution for my case.

I have a simpel jot guestbook
chunk:

[!Jot? &customfields=`name, email` &subscribe=`1` &canedit=`admin` &captcha=`1` &canmoderate=`admin` &pagination=`8` !]

[+jot.html.form+]
[+jot.html.comments+]
[+jot.html.navigation+]
[+jot.html.moderate+]

Can someone help me with this?

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 15 years ago

https://forums.modx.com/thread/43182/howto-use-tinymce-or-other-rte-in-posting-jot-comments#dis-post-249303

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

33 Posts

deTuinman Reply #3, 15 years ago

I'm aware of that topic, but it does nothing:

can someone please check this code for me:

<script type="text/javascript" src="/assets/plugins/tinymce3201/jscripts/tiny_mce.js"></script>
<script type="text/javascript">
 tinyMCE.init({
    theme : "advanced",
    mode : "none",
    theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,formatselect,removeformat,cleanup",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "center",
    theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    entity_encoding : "raw",
    add_unload_trigger : false,
    remove_linebreaks : false,
    inline_styles : false,
    convert_fonts_to_spans : false }
 );
</script>

[!Jot? &tplForm=`formTpl` &tplComments=`commentsTpl` &customfields=`name, email` &subscribe=`1` &canedit=`admin` &captcha=`1` &canmoderate=`admin` &pagination=`8` !]

[+jot.html.form+]
[+jot.html.comments+]
[+jot.html.navigation+]
[+jot.html.moderate+]

<script type="text/javascript">
 tinyMCE.execCommand('mceToggleEditor',false,'comment');
</script>

and a formTpl chunk:

<label>Comment:

<textarea>[+form.field.content:esc+]</textarea>
</label>

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 15 years ago

As the post I linked to says, first you have to edit the path to your installation of TinyMCE. It may be

/assets/plugins/tinymce/jscripts/tiny_mce.js

Take a look in your assets/plugins directory to see exactly what the tinymce's directory name is.

If your site is not installed in the web root, you'll probably have to add the subdirectory under which it is installed. Javascript tends to have a problem with relative paths.

In the second place, it says the textarea must have an ID that is the same as the last parameter of the javascript's execCommand() function; in this case it's 'comment'. So in the chunk tpl you'll need to add

id="comment"

to the textarea tag.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

33 Posts

deTuinman Reply #5, 15 years ago

wow thanks, but the form is gone..

tinymce is perfect though

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 15 years ago

Put whatever form you want in the chunk tpl. The point is that for the TinyMCE to work there has to be a textarea with the id to match the javascript parameter.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org