TinyMCE - Insert HTML Code
Thursday, 3. May 2007, 16:31:34
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 :
…then you’ll need to add a new line, just below the “height” parameter. Something like this :
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 :
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 :
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>
(0%)
WIDGETIZE
mank1 # 12. May 2007, 12:41
Thanks for posting this.
Contrid # 12. May 2007, 12:51
See...they actually block most elements due to security reasons.
You need to enable the ones you want to allow.
Sergio_dsc # 5. July 2007, 06:33
This post is just i was searching but... I've added the extended_valid_elements and when I try to write manually a link, it shows like this:
<a href="http://www.uuuuuuuu.com">www.uuuuuuu.com</a>
What might I edit to solve the problem?
Thanks a lot!!!
Sergio_dsc # 5. July 2007, 06:34
(without strips)
"<a href="http://www.newmusicalpress.com">Nuevaprensamusical</a>"
Contrid # 5. July 2007, 06:59
Sergio_dsc # 5. July 2007, 08:06
(thanks)
Contrid # 5. July 2007, 08:33
Contrid # 5. July 2007, 08:38
...that will allow all html characters to stay intact. Have you tried this? If not, please try it, since it will most probably solve your problem.
Put that line below you current, comma-seperated list of options.
deoriginalclaritydigital # 22. November 2007, 08:58
I just wanted to add also that this:
tinyMCE.init({
entity_encoding:"raw"
});
strips tinyMCE completely from the textarea, and as it suggests, you end up with raw html...jus the way anyone would love it....
Thanks again...youre a champ!
Lea
bgibson # 2. August 2008, 03:27
Example of copied HTML Code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="bgibson@ptwinsock.com">
<input type="hidden" name="undefined_quantity" value="1">
<input type="hidden" name="item_name" value="ProTrainer WinSock">
<input type="hidden" name="amount" value="35.00">
<input type="hidden" name="shipping" value="0.00">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="http://www.ptwinsock.com">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0.00">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-BuyNowBF">
</form>
When I paste this into Site Builders HTML Source Editor for the page, this is what it does to it.
Example of pasted HTML Code after updating:
<form method="post" action="https://www.paypal.com/cgi-bin/webscr"></form><input name="cmd" type="hidden" /> <input name="business" type="hidden" /> <input name="undefined_quantity" type="hidden" /> <input name="item_name" type="hidden" /> <input name="amount" type="hidden" /> <input name="shipping" type="hidden" /> <input name="no_shipping" type="hidden" /> <input name="return" type="hidden" /> <input name="currency_code" type="hidden" /> <input name="tax" type="hidden" /> <input name="lc" type="hidden" /> <input name="bn" type="hidden" />
webmastertj # 6. February 2009, 16:03
sorry guys .. but i'm completely a beginner, can anybody tell me in which file to add these lines of code. because i'm using joomla 1.5, whenever i put the <form></form> tag it disappears.
regards
tj