Wordpress : Using TinyMCE with your plug-in
Saturday, 28. April 2007, 03:38:22
Want to use TinyMCE with one of your Wordpress plugins?
Obviously you can include all the TinyMCE files in your plugin and use those, but you seriously don't have to, since Wordpress already has TinyMCE ready for you.
Btw...for those of you who don't know what TinyMCE is, it's a WYSIWYG (What You See Is What You Get) HTML editor for webpages. See the screenshot below :
Let's say that you have a plugin which creates a form in the administration panel, allowing the administrator to enter some text, even HTML with CSS into a textarea. You'll first need to include a reference to the "tiny_mce.js" file included with Wordpress.
Once you have done that, you'll need to initialize the TinyMCE class and tell it how to behave. See the code below. It tells TinyMCE to use the "advanced" theme and replace all elements with the "editorContent" ID with the TinyMCE User Interface. The code also specifies the WIDTH and the HEIGHT of the User Interface. There are many more parameters you can use, but you'll need to look at the TinyMCE documentation, since I don't really know many of them.
Lastly, you'll need to put a TEXTAREA on the page somewhere which will be replace with the TinyMCE User Interface. It will be something like this :
And that's just about it.
TinyMCE used inside of one of your own, custom Wordpress plugins.
Obviously you can include all the TinyMCE files in your plugin and use those, but you seriously don't have to, since Wordpress already has TinyMCE ready for you.
Btw...for those of you who don't know what TinyMCE is, it's a WYSIWYG (What You See Is What You Get) HTML editor for webpages. See the screenshot below :
Let's say that you have a plugin which creates a form in the administration panel, allowing the administrator to enter some text, even HTML with CSS into a textarea. You'll first need to include a reference to the "tiny_mce.js" file included with Wordpress.
<script type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce.js"></script>
Once you have done that, you'll need to initialize the TinyMCE class and tell it how to behave. See the code below. It tells TinyMCE to use the "advanced" theme and replace all elements with the "editorContent" ID with the TinyMCE User Interface. The code also specifies the WIDTH and the HEIGHT of the User Interface. There are many more parameters you can use, but you'll need to look at the TinyMCE documentation, since I don't really know many of them.
<script type="text/javascript">
<!--
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "editorContent",
width : "565",
height : "200"
});
-->
</script>
Lastly, you'll need to put a TEXTAREA on the page somewhere which will be replace with the TinyMCE User Interface. It will be something like this :
<textarea id="editorContent"></textarea>
And that's just about it.
TinyMCE used inside of one of your own, custom Wordpress plugins.
(0%)
WIDGETIZE