Howto use tinymce or other RTE in posting jot comments

Hi, I saw topic like mine a couple of months (at least) ago. Is there a possibility to include rte editor in posting jot coments?

Regards,

Mike

Quote from: salik at Apr 21, 2008, 08:16 AM

Hi, I saw topic like mine a couple of months (at least) ago. Is there a possibility to include rte editor in posting jot coments?

Regards,

Mike

I’m looking for something similar myself.

Edit the path to your TinyMCE plugin’s .js file

And in your form tpl chunk

<label for="comment">Comment:

<textarea tabindex="[+jot.seed:math=`?+2`+]" name="content" cols="50" rows="8" id="comment">[+form.field.content:esc+]</textarea>
</label>

The ID of the textarea has to be the same as the last parameter in the javascript tinyMCE.execCommand function.

Oh thank you. I’ve been looking all over.

I need some more help from you if that’s alright.

I now have the tinyMCE editor working in my jot comments form, but when I post a comment, the html is not getting parsed and still shows <strong>Hello</strong> etc.. I looked around and found that I might need to edit a line in my comments template from [+comment.content:wordwrap:esc:nl2br+] to [+comment.content:bbcode:nl2br+]. So I did that and also made a new snippet called phx:bbcode. It still doesn’t parse the html in the comments. I also tried adding a plug-in called bbcode parser that I got from this website and added the event to it called onWebPagePreRender.
It still will not work!!
I’ve looked everywhere for an answer. I’m out of hope. Please help me!
Let me know if you want me to post my callouts and such.

I’m still trying to get an answer on how to get the html to parse in the comments. It’s still showing up as raw html.
Here’s my callout:
<div id="commentsAnchor">
<script type="text/javascript" src="/assets/plugins/tinymce3241/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "none",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,image,link,unlink,formatselect,removeformat,cleanup",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
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=`commentsform` &tplComments=`comments` &pagination=`5` &moderated=`1` &canmoderate=`admin` &notify=`2` !]

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

</div>

Here’s my comments template:

<a name="jc[+jot.link.id+][+comment.id+]"></a>
<div class="jot-row [+chunk.rowclass+] [+comment.published:is=`0`:then=`jot-row-up`+]">
<div class="jot-comment">

<div class="jot-user">
[+comment.createdby:isnt=`0`:then=`<b>`+][+comment.createdby:userinfo=`username`:ifempty=`[+comment.custom.name:ifempty=`[+jot.guestname+]`:esc+]`+][+comment.createdby:isnt=`0`:then=`</b>`+]

Reviews: [+comment.userpostcount+]
</div>

<div class="jot-content">

<div class="jot-posticon">
[+phx:userinfo=`lastlogin`:ifempty=`9999999999`:lt=`[+comment.createdon+]`:then=`
<img src="[(base_url)]assets/snippets/jot/templates/comment.gif" width="16" height="16" alt="New comment" border="0" />
`:else=`
<img src="[(base_url)]assets/snippets/jot/templates/comment_trans.gif" width="16" height="16" alt="Comment" border="0" />
`:strip+]
</div>

<div class="jot-mod">
[+jot.moderation.enabled:is=`1`:then=`
<a href="[+jot.link.delete:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to delete this comment?’)" title="Delete Comment"><img src="[(base_url)]assets/snippets/jot/templates/delete.gif" width="16" height="16" alt="Delete Comment" border="0" /></a>
[+comment.published:is=`0`:then=`
<a href="[+jot.link.publish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to publish this comment?’)" title="Publish Comment"><img src="[(base_url)]assets/snippets/jot/templates/publish.png" width="16" height="16" alt="Publish Comment" border="0" /></a>
`+]
[+comment.published:is=`1`:then=`
<a href="[+jot.link.unpublish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to unpublish this comment?’)" title="Unpublish Comment"><img src="[(base_url)]assets/snippets/jot/templates/unpublish.png" width="16" height="16" alt="Unpublish Comment" border="0" /></a>
`+]
`:strip+]
[+jot.user.canedit:is=`1`:and:if=`[+comment.createdby+]`:is=`[+jot.user.id+]`:or:if=`[+jot.moderation.enabled+]`:is=`1`:then=`
<a href="[+jot.link.edit:esc+][+jot.querykey.id+]=[+comment.id+]#jf[+jot.link.id+]" onclick="return confirm(’Are you sure you wish to edit this comment?’)" title="Edit Comment"><img src="[(base_url)]assets/snippets/jot/templates/edit.gif" width="16" height="16" alt="Edit Comment" border="0" /></a>
`:strip+]
</div>

<span class="jot-subject">[+comment.title:limit:esc+]</span>

<span class="jot-poster"><b>Posted on :</b> [+comment.createdon:date=`%a %B %d, %Y, %H:%M:%S`+]</span>
<hr />
<div class="jot-message">[+comment.content:bbcode:nl2br+]</div>
<div class="jot-extra">
[+comment.editedon:isnt=`0`:then=`
<span class="jot-editby">Last Edit: [+comment.editedon:date=`%B %d, %Y, %H:%M:%S`+] by [+comment.editedby:userinfo=`username`:ifempty=` * `+]</span>
&nbsp;`+] [+jot.moderation.enabled:is=`1`:then=`<a target="_blank" href="http://www.ripe.net/perl/whois?searchtext=[+comment.secip+]">[+comment.secip+]</a>`+]</div>
</div>

</div>

</div>

remove the :esc modifier from your comments template !!

esc means escape html, the default template has this modifier on the content field.

I was having trouble with this myself....

Quote from: pranawebdesign at May 18, 2010, 09:04 PM

remove the :esc modifier from your comments template !!

esc means escape html, the default template has this modifier on the content field.

I was having trouble with this myself....

Damn! Still not working.... Are you using the TinyMCE in your commentsform? Can you post your Comments tpl, Comments Form tpl, and your phx:bbcode snippet and your actual Jot callout? I’ll probably be able to figure it out from that if it’s working for you.

Scratch that! All of my new posts are working correctly! Thanks for your help.

Raising the dead again. Haha.

Quote from: sottwell at May 13, 2010, 02:42 PM

Edit the path to your TinyMCE plugin's .js file

<div id="commentsAnchor"> 
<script type="text/javascript" src="/assets/plugins/tinymce3241/jscripts/tiny_mce/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` &tplModerate=`moderateTpl` &pagination=`0` &canpost=`Site Admins`!] 

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

And in your form tpl chunk

<label for="comment">Comment:

<textarea tabindex="[+jot.seed:math=`?+2`+]" name="content" cols="50" rows="8" id="comment">[+form.field.content:esc+]</textarea>
</label>

The ID of the textarea has to be the same as the last parameter in the javascript tinyMCE.execCommand function.

I am having trouble implementing this for my forms. Some questions...

Where do I put this...



In it's own chunk? Before the form, or after the form?

I can remove the Jot call right? If so, what do i put in the tabindex value?

Will [+form.field.content+] still store the content of the textarea or do I need to set that placeholder again in my snippet? I notice it's only single [] encapsulated.