Skip navigation.

Contridentuallity

Not a fact, a theory!?

Posts tagged with "tinymce"

TinyMCE - Insert HTML Code

, , , ...

So, you might be reading this because you are having trouble inserting HTML code into your TinyMCE WYSIWYG editor. Off course you can add the HTML, but it automatically gets stripped by the editor and just disappears.

By default, TinyMCE only allows specific tags in it’s editor content body. These are known as valid tags. Even so, you can tell it to allow additional tags which you’ll specify in the TinyMCE initialization function.

Usually, you will initialize TinyMCE using something like this :

<script type="text/javascript">
<!–
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "editorContent",
width : "565",
height : "200"
});
–>
</script>


…then you’ll need to add a new line, just below the “height” parameter. Something like this :

extended_valid_elements : "input[name|size|type|value|onclick]",


The line of code shown above, will allow you to insert the <INPUT> element with 5 different attributes : “name”, “size”, “type”, “value”, “onclick”. Please note that you can add more attributes as well. Just seperate each attribute as shown above. Not only that, but you can add more elements as well. Something like this :

extended_valid_elements : "input[name|size|type|value|onclick],iframe[height|width|src]",


And that’s it! This will allow you to insert your needed HTML elements into TinyMCE editor without it being stripped automatically.

You’ll end up with your init(); function looking something like this :

<script type="text/javascript">
<!–
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "editorContent",
width : "565",
height : "200",
extended_valid_elements : "input[name|value|size|class|onclick|type],iframe[name|src|framespacing|border|frameborder|scrolling|title|height|width]"
});
–>
</script>

Wordpress : Using TinyMCE with your plug-in

, , , ...

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.

<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.
Download Opera, the fastest and most secure browser
December 2009
S M T W T F S
November 2009January 2010
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31