tinymce: disable typing inside an inserted tag and offset cursor

Question

I need to insert any tag (let's call it a cut-tag) that divide publication into 2 parts. I would like this tag to be visible.

I implemented the simple custom plugin:

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

And include my own 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;
}

But when I'm trying to put smth else tynymce insert text inside this fake span and more over, when I press enter it copies this tag again and again.

Could anyone help me fix code. Is there another way to implement it?

Answer 1

The solution was very simple. TinyMCE has noneditable plugin. I include it and add to an inserted element class 'mceNonEditable'

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

And plugin looks like

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

It's perfect.