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;
}

但是当我试图把其他tynymce插入文本放在这个假的跨度中时，当我按下回车键时，它会一次又一次地复制这个标签。

任何人都可以帮我修复代码。还有其他方法可以实现吗？

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>');
    }
  });
 });

这很完美。

Answer 2

经过研究，我认为干净地插入标记的关键可能是

onclick: function(){
  editor.insertContent('<span class="cut-tag">&nbsp;</span> ', {format : 'raw'});
}

然后为防止它进入多个副本，还要添加：

onkeydown: function(e){
  if(e.keyCode == 13){
      e.preventDefault();
  }
});