1

Is there any way to put one span inside p tag(root element of tiny mce)? I mean each new line should be 

<p><span></span></p>

Any idea to achieve this?

My workarounds are these..

  1. I tested forced_root_block: 'p,span' but it wont worked.
  2. In each key press i tried to replace <p> with <p><span> and </p> with </span></p> but that is not reflecting in editor and i am sure the replace logic works perfectly because i printed in console that shows the expected output(<p><span>{{my input}}</span></p>).
Linoy
  • 1,363
  • 1
  • 14
  • 29
  • maybe this will help http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – dllhell Aug 12 '15 at 13:37
  • Sorry, I put 'div' tag inside 'P' as an example, I am looking to add a html element that can be any thing like span or h1 etc inside "P" tag. Now i edited the question. – Linoy Aug 12 '15 at 13:42

3 Answers3

3

Yes, use this directive inside your tinymce.init({});

setup: function(editor) {
    editor.on('PostProcess', function(ed) {
        ed.content = ed.content.replace(/(<p>)/gi,'<p><span>').replace(/(<\/p>)/gi,'<\/span><\/p>');
    });
}

This will replace automatically all your <p></p> tags with <p><span></span></p>

Look: i'm using the PostProcess event http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.PostProcess

With a little bit of imagination you can customize that event a little bit more. Here you can see a full working example: http://jsfiddle.net/csedoardo/bbfg7x3z/

cs.edoardo
  • 494
  • 3
  • 11
0

would this achieve what you're looking for?

tinymce.init({
    selector: 'textarea',
    forced_root_block: 'span',
    force_p_newlines: true
});
stackoverfloweth
  • 6,669
  • 5
  • 38
  • 69
0

For Chrome compatable browser TinyMCE replace new line <div></div> blocks. This tags have zero lineHeight. Use setup options for replace TAG

    tinymce.init({
        selector: 'textarea',
...
        setup: function(editor) {
            editor.on('PostProcess', function(ed) {
                ed.content = ed.content.replace(/(<div><\/div>)/gi,'<p><\/p>');
            });
        },
...
    )}
slva2000
  • 99
  • 4