javascript - tinymce:禁止在插入的标签内打字和偏移光标

Question

我需要插入将出版物分成两部分的任何标签(我们称之为剪切标签)。我希望这个标签可见。

我实现了简单的自定义插件:

tinymce.PluginManager.add('cuttag', function(editor, url) {

// Add a button that opens a window
editor.addButton('cuttag', {
    text: false,
    image: url + '/icon/cuttag.png',
    tooltip: 'Insert cut-tag',
    onclick: function() {
        editor.insertContent('<span class="cut-tag">&nbsp;</span>');
    }
   });
});

并包含我自己的 content_css

.cut-tag {
display: block;
border-bottom: 1px dashed #000000;
position:relative;
}

.cut-tag:after{
   position:absolute;
   content:'a cutting line';
   width:100%;
   text-align:center;
}

但是，当我尝试将 smth else tynymce insert text 放入这个假范围内时，当我按下 enter 键时，它会一次又一次地复制这个标签。

谁能帮我修改代码。有其他实现方式吗？

Answer 1

解决方案非常简单。TinyMCE 有 noneditable 插件。我包含它并添加到插入的元素类“mceNonEditable”

 <TinyMCE config={{
           plugins: 'noneditable',
           // ... the rest of settings
        }}/>

插件看起来像

tinymce.PluginManager.add('cuttag', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('cuttag', {
    text: false,
    image: url + '/icon/cuttag.png',
    tooltip: 'Insert cut-tag',
    onclick: function() {
    editor.insertContent('<span class="cut-tag mceNonEditable">&nbsp;</span>');
    }
  });
 });

太完美了。