Topic: How to edit TinyMCE code?
I want to change the HTML that is rendered by TinyMCE but not what appears in the editor textarea. To be specific, the Horizontal Rule button renders a <hr/> tag which is conflicting somehow with the CSS of my page (hr tags are prone to unexpected behavior). I want to replace the <hr/> tag with a div with 1px border, i.e. the Horizontal Rule button should render <div class='hr'></div> instead of <hr/>. I have defined CSS for class hr as border-top:1px solid; width:100%; padding:10px 0px; in my CSS.
For this I edited /jscripts/tiny_mce/tiny_mce.js file. I searched for <hr /> and replaced it with <div class='hr'></div>. This is now changing the rendered HTML but the side-effect has been that the horizontal rule has been replaced by a blank div in the editor textarea also.
Is there any way to keep the horizontal rule (<hr/>) appearing in the editor textarea but change only the HTML that is rendered?
P.S. I am using v3.5