WYSIWYG for script.aculo.us InPlaceEditor (Using TinyMCE)

First of all, sorry for my english - I\\47m not a native speaker (I\\47m from Russia) :)

What is that about

I needed to give our users an ability to edit some text in WYSIWYG mode via InPlaceEditor. If you need it too, here\\47s theright place and the right solution, I hope :)

Solution

I choseTinyMCE for It\\47s ease of use and yet a great potential.

So, it turned out pretty simple and all you need to do is:

1. Download TinyMCE;
2. Install TinyMCE according to it\\47s own documentation (it\\47s quite simple. Actually, you just need to upload the files:);
3. Download extended tools.js file and replace your old version with this one;
4. On the page where you\\47re planning to use the editor, initialise TinyMCE with something like that:

   <script type="text/javascript" src="tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme: "simple",
mode: "none"
})
</script>

   More information on TinyMCE usage and tuning you can find in it\\47s documentation wiki.
5. Finally, add this option to your InPlaceEditor object to enable the WYSIWYG editing:

   veButton: true

   If you want to change the text on the button you can use an additional option:

   veText: {0: \\47Turn on the editor\\47, 1: \\47Turn off the editor\\47}

   And if you want the WYSIWYG editor to be turned on by default, add this option:

   veIsOn: true

   To modify the button\\47s appearence, use the css class editor_ve_button.

After all, your page with the extended InPlaceEditor should look something like this:

<script type="text/javascript" src="tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme: "simple",
mode: "none"
})
</script>
<div id="editable">Text to edit</div>
<script type="text/javascript">
new Ajax.InPlaceEditor(\\47editable\\47, \\47save_text.php\\47, { rows: 15, cols: 80, veButton: true, veText: {0: \\47WYSIWYG mode\\47, 1: \\47Source code mode\\47} });
</script>

Compatibility

I\\47ve tested it in Firefox 2.0, IE6 and Opera 9.01 and it works well in all of them.

Feedback

Everyone is welcome in case you found any bugs or have any suggestions and/or improvements!

___________________________
From Russia with love :)
Valentine.