1 Topic by zee

  • zee
  • Member
  • Offline
  • Registered: 2012-06-26
  • Posts: 1

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

2 Reply by Krupski

  • Krupski
  • Member
  • Offline
  • From: United States of America
  • Registered: 2010-10-18
  • Posts: 501

Re: How to edit TinyMCE code?

zee wrote:

I want to change the HTML that is rendered by TinyMCE but not what appears in the editor textarea.

Try this in your editor config:

    'setup' : function (ed) {

        ed.onInit.add(function (ed) {

            ed.onBeforeSetContent.add(function(ed, o) {
                o.content = o.content.replace(/(<hr\s?\/?>)/gi,'<div class="hr">&nbsp;</div>');
            });

            ed.onPostProcess.add(function(ed, o) {

                if (o.set) {
                    o.content = o.content.replace(/(<hr\s?\/?>)/gi,'<div class="hr">&nbsp;</div>');
                }

                if (o.get) {
                    o.content = o.content.replace(/(<div class="hr">&nbsp;<\/div>)/gi,'<hr />');
                }

            });

        };
    },
"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

Krupski's Website

3 Reply by madmanking

  • madmanking
  • Member
  • Offline
  • Registered: 2012-06-26
  • Posts: 15

Re: How to edit TinyMCE code?

Hey, my dear friends, I am a crazy diablo 3 fans. I have played this game series for more ten years. I have enjoyed the diablo 2 for several years before the releasing of diablo 3. I think this diablo 3 is harder than the formers in some occasion. This game need more diablo 3 gold andbetter[url=http://www.upitems.com/diablo3-items]
diablo 3 items [/url]while you are fighting will the boss, or you will be killed in several seconds. But I always condused by my poor diablo 3 items and the shortage of diablo 3 gold. Fortunately, one of my diablo 3 fighting friends told me a good place to buy diablo 3 gold at a very cheap price. There are uncountable diablo 3 gold for sale. I have checked it before. The price here is more cheaper than any other place. After that, you can also buy diablo 3 items here. I do hope my advice can help you to gain a better game experience! Go! Let go to enjoy it together!

4 Reply by 7iqid

  • 7iqid
  • Member
  • Offline
  • Registered: 2012-11-09
  • Posts: 4

Re: How to edit TinyMCE code?

can you do this using the DOM?

in that i mean, o.content returns a string useful to srt.replace(). however, i am unfamiliar with perl and regular expressions. i would love to be able to do something like this...

jQuery(o.content).find('.class-name').remove()

or

jQuery(o.content).find('#id-nam').append('<tag>content</tag>')

and so on.

can this be done?