TinyMce：定制新行

Posted 2021-04-29

有没有办法在p标记（微小mce的根元素）内放置一个span？我的意思是每行都应该是

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

任何实现这一目标的想法？

我的解决方法是这些。.

1. 我测试了forced_root_block: 'p,span'，但没有用。
2. [在每次按键中，我试图替换<p> with <p><span> and </p> with </span></p>，但这在编辑器中没有体现出来，并且我确信替换逻辑可以正常工作，因为我在控制台上打印了显示预期的输出（<p><span>{{my input}}</span></p>）。

答案

是，请在tinymce.init({});中使用此指令

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

这将自动将您的所有<p></p>标签替换为<p><span></span></p>

外观：我正在使用PostProcess事件http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.PostProcess

有了一点想象力，您就可以自定义该事件了。在这里您可以看到一个完整的工作示例：http://jsfiddle.net/csedoardo/bbfg7x3z/

另一答案

这能实现您想要的吗？

tinymce.init({
    selector: 'textarea',
    forced_root_block: 'span',
    force_p_newlines: true
});

另一答案

对于与Chrome兼容的浏览器TinyMCE替换新行块。使用setup选项替换TAG

tinymce.init({
    selector: 'textarea',

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