in the dom in my tinyMCE editor i see

<p>
  <i>testing 123</i>
</p>

but when i run

tinyMCE.activeEditor.getContent()

it returns

<p>
  <em>testing 123</em>
</p>

Why is it changing <i> into <em>? Im having problems with this because i want to insert text dynamically that is surrounded with tags and things are getting confusing.

in the dom in my tinyMCE editor i see

<p>
  <i>testing 123</i>
</p>

but when i run

tinyMCE.activeEditor.getContent()

it returns

<p>
  <em>testing 123</em>
</p>

Why is it changing <i> into <em>? Im having problems with this because i want to insert text dynamically that is surrounded with tags and things are getting confusing.

• javascript
• ruby-on-rails
• tinymce

1 Answer 1

The default rule set for the valid_elements option contains em/i which means that all <i> Tags will be replaced by <em> in the output. You could add your own valid_elements option which would leave <i> intact. You could just modify the default rule set for that:

valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
+ "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
+ "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
+ "name|href|target|title|class|onfocus|onblur],strong/b,em,i,strike,u,"
+ "#p,-ol[type|pact],-ul[type|pact],-li,br,img[longdesc|usemap|"
+ "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
+ "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
+ "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
+ "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
+ "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
+ "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
+ "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
+ "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
+ "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,"
+ "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
+ "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
+ "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
+ "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
+ "q[cite],samp,select[disabled|multiple|name|size],small,"
+ "textarea[cols|rows|disabled|name|readonly],tt,var,big"

Notice I replaced em/i with em,i. That way both <i> and <em> are valid tags and neither will be replaced in the output.

If this is too much you could also reduce the list of the valid elements to contain only those elements that you really need in your HTML. For example you might not allow your users to create any tables and therefore you could just remove all references to table, tbody, tr, td etc.