MyBB Community Forums

Full Version: How to integrate TinyMCE WYSIWYG editor fast and easy
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5
Chris Boulton Wrote:Or you could always get my pretty version of TinyMCE from http://www.surfionline.com/archives/2007...-get-some/

[Image: tinymce_me.png]

However - you need to be extremely careful with allowing HTML in your forums. Though we've done a lot to combat script execution with HTML turned on there is still possibly other ways scripts can be executed to perform XSS and such as well as the possibility of users breaking your layout by using malformed tags.

Dear Chris , I Downloaded your recommended version of Tiny mmce . While adding the code to codebuttons template , replaced the the link to the js file as mydomain/timymce/surfi_tinymce.js  but still nothing is shown while editing /posting .

- I have enabled HTML in all forums

contents of codebutton Template:

<script language="javascript" type="text/javascript" src="http://www.freewebworld.xsishost.com/FreeWebWorld/tinymce/surfi_tinymce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<!--<script type="text/javascript" src="jscripts/editor.js?ver=121"></script>
<script type="text/javascript">
{$editor_language}
var clickableEditor = new messageEditor("message", {lang: editor_language, rtl: {$lang->settings['rtl']}});
clickableEditor.bindSmilieInserter("clickable_smilies");
</script>-->


[ u May use the guest Section to test ]
Works perfectly with me:
-first, you must have the official tinymce package, and overwrite it with surfy
-then go to codebuttons:
<script language="javascript" type="text/javascript" src="tiny_mce/surfi_tinymce.js"></script>
<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_css : 'tiny_mce/surfi_tinymce.css',
    plugins : "table,advhr,advimage,advlink,spellchecker,media,searchreplace,contextmenu,paste,fullscreen",
    theme_advanced_custom_layout: "drawEditor",
    theme_advanced_layout_manager: 'CustomLayout',
    theme_advanced_containers: 'con1,con2,con3,mceEditor,mceStatusbar',
    theme_advanced_con1_toolbars: 'toolbar1,toolbar2',
    theme_advanced_toolbar1_align : 'left',
    theme_advanced_toolbar1 : 'cut,copy,paste,pastetext,pasteword,separator,iespell,seperator,undo,redo,separator,search,replace,selectall,separator,removeformat',
    theme_advanced_toolbar2_align : 'right',
    theme_advanced_toolbar2 : 'spellchecker,code,fullscreen',
    theme_advanced_con2_toolbars : 'toolbar3,toolbar4',
    theme_advanced_toolbar3_align : 'left',
    theme_advanced_toolbar3 :
'bold,italic,underline,strikethrough,separator,numlist,bullist,separator,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,link,unlink,anchor,',
    theme_advanced_toolbar4 : 'image,table,hr,charmap',
    theme_advanced_toolbar4_align : 'right',
    theme_advanced_con3_toolbars : 'toolbar5',
    theme_advanced_toolbar5 : 'styleselect,formatselect,fontselect,fontsizeselect,separator,forecolor,backcolor'
});
</script>
Ok..
I Uploaded The original Tiny mce to tiny_mce folder.
And The Surfi package was uploaded to tinymce Folder

Then i added the foll .code to my Codebuttons :

<script language="javascript" type="text/javascript" src="http://www.freewebworld.xsishost.com/FreeWebWorld/tinymce/surfi_tinymce.js"></script>
<script language="javascript" type="text/javascript" src="http://www.freewebworld.xsishost.com/FreeWebWorld/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_css : 'thttp://www.freewebworld.xsishost.com/FreeWebWorld/tinymce/surfi_tinymce.css',
    plugins : "table,advhr,advimage,advlink,spellchecker,media,searchreplace,contextmenu,paste, fullscreen",
    theme_advanced_custom_layout: "drawEditor",
    theme_advanced_layout_manager: 'CustomLayout',
    theme_advanced_containers: 'con1,con2,con3,mceEditor,mceStatusbar',
    theme_advanced_con1_toolbars: 'toolbar1,toolbar2',
    theme_advanced_toolbar1_align : 'left',
    theme_advanced_toolbar1 : 'cut,copy,paste,pastetext,pasteword,separator,iespell,seperator,undo,redo,separa tor,search,replace,selectall,separator,removeformat',
    theme_advanced_toolbar2_align : 'right',
    theme_advanced_toolbar2 : 'spellchecker,code,fullscreen',
    theme_advanced_con2_toolbars : 'toolbar3,toolbar4',
    theme_advanced_toolbar3_align : 'left',
    theme_advanced_toolbar3 :
'bold,italic,underline,strikethrough,separator,numlist,bullist,separator,outdent ,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,l ink,unlink,anchor,',
    theme_advanced_toolbar4 : 'image,table,hr,charmap',
    theme_advanced_toolbar4_align : 'right',
    theme_advanced_con3_toolbars : 'toolbar5',
    theme_advanced_toolbar5 : 'styleselect,formatselect,fontselect,fontsizeselect,separator,forecolor,backcolor'
});
</script>


But I am getting the foll. O/P :

[attachment=5354]

Plz Help !
OOps That was the small 't' in the url of the editor.css file.
Its working Now !
Thank u Darkteller.
Onle last qs. How can the width of the Editor Text area Be increased ?
Dear Darkteller,

The Tiny Mce is working properly when user edits in Posts But there is a slight Problem when
the Editor opens Up While sending / Replying a PM .

[attachment=5366]

Any Idea on How to Remove This Error ?
Is there any problem with allowing HTML.Are there ant risks of hacking.
That has to do with the same question on the width. You have to go into your templates and change the number of cols in:
Private Messaging Templates--> private_send
And you have to do it for any postbit in wich there's a codebutton box.
buraq Wrote:Is there any problem with allowing HTML.Are there ant risks of hacking.

I don't know. Theorically, if you allow the editor, noone can use html tags besides of those of the editor (you can't write for example <object blablabla/>), but I'm not a programmer and i give no warranties.
darkteller Wrote:That has to do with the same question on the width. You have to go into your templates and change the number of cols in:
Private Messaging Templates--> private_send
And you have to do it for any postbit in wich there's a codebutton box.

<html>
<head>
<title>{$lang->compose_pm}</title>
{$headerinclude}
</head>
<body>
{$header}
<form action="private.php" method="post" name="input">
<table width="100%" border="0" align="center">
<tr>
{$usercpnav}
<td valign="top">
{$preview}
{$send_errors}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->compose_pm}</strong></td>
</tr>
<tr>
<td class="trow1" valign="top"><strong>{$lang->compose_to}</strong></td>
<td class="trow1"><input type="text" class="textbox" name="to" id="to" size="40" maxlength="{$mybb->settings['maxnamelength']}" value="{$to}" tabindex="1" /></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->compose_subject}</strong></td>
<td class="trow2"><input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="2" /></td>
</tr>
{$posticons}
<tr>
<td class="trow2" valign="top"><strong>{$lang->compose_message}</strong><br/><br/><div style="margin:auto">{$smilieinserter}</div></td>
<td class="trow2">
<textarea name="message" id="message" rows="20" cols="60" tabindex="3">{$message}</textarea>
{$codebuttons}
</tr>
<tr>
<td class="trow1" valign="top"><strong>{$lang->compose_options}</strong></td>
<td class="trow1"><span class="smalltext">
<label><input type="checkbox" class="checkbox" name="options[signature]" value="yes" tabindex="8" {$optionschecked['signature']} />{$lang->options_sig}</label><br />
<label><input type="checkbox" class="checkbox" name="options[disablesmilies]" value="yes" tabindex="9" {$optionschecked['disablesmilies']} />{$lang->options_disable_smilies}</label><br />
<label><input type="checkbox" class="checkbox" name="options[savecopy]" value="yes" tabindex="10" {$optionschecked['savecopy']} />{$lang->options_save_copy}</label><br />
<label><input type="checkbox" class="checkbox" name="options[readreceipt]" value="yes" tabindex="11" {$optionschecked['readreceipt']} />{$lang->options_read_receipt}</label><br />
</span></td>
</tr>
</table>
<br />
<input type="hidden" name="action" value="do_send" />
<input type="hidden" name="pmid" value="{$pmid}" />
<input type="hidden" name="do" value="{$do}" />
<div style="text-align:center"><input type="submit" class="button" name="submit" value="{$lang->send_message}" tabindex="4" accesskey="s" /> <input type="submit" class="button" name="saveasdraft" value="{$lang->save_draft}" tabindex="5" /> <input type="submit" class="button" name="preview" value="{$lang->preview}" tabindex="6" /></div>
</td>
</tr>
</table>
</form>
{$footer}
{$autocompletejs}
</body>
</html>


This is the exact content of the private_send Template.
Can u plz guide me where to make changes ?
Pages: 1 2 3 4 5