Protect DIV element from being deleted within TinyMCE

Question

I am trying to create a scenario where ONLY content within a DIV can be deleted and not the DIV tags themselves in the TinyMCE editor used in WordPress.

For example;

<div class="name">

content

</div>

Within the TinyMCE editor I would like the user to be able to deleted his/her "content" but for the backspace/delete key to be disabled when it comes to deleting they should be prohibited in doing so.

I thought of maybe something along the lines of;

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

Since the user does not see the HTML in the TinyMCE Visual pane - it might be possible to allow content ONLY within to be editable and once recognized to be empty all delete functions (mouse/keyboard) are disabled to preserve the div.

I hope this makes sense, if not please let me know and I will try and provide some further information. I have looked high and low for a potential solution but I am not sure the best way to go about solving this.

Thank you.

Answer 1

I wrote a plugin that was inspired by Corepany's code.

https://github.com/csga5000/tinymce-prevent-delete

It works with tinymce's non-editable plugin, and theoretically makes it so you cannot remove the non-editable areas.

I made it for my own purposes, but uploaded so anyone with similar needs to me can use it.

See:

https://jsfiddle.net/5a5p5vz7/

Usage:

index.html

...
<script src="preventdelete.js"></script>
...

somefile.js

tinymce.init({
    ...
    plugins: ["noneditable","preventdelete"]
    ...
})

Answer 2

Hello I have the same problem and I wrote this plugin with out jQuery. Hope it helps

//THIS PLUGIN PREVENTS DELETION OF BOOTSTRAP ELEMENTS WHICH HAS DEFINED CLASS
tinymce.PluginManager.add('preventdelete', function(ed, link) {

    var lastContainer;
    //List of bootstrap elements not to delete
    var bootstrapElements = ["col-sm-2","col-sm-4","col-sm-8","col-sm-10"];

    ed.on('keydown', function(evt) {

        var node            = ed.selection.getNode();
        var range           = ed.selection.getRng();
        var startOffset     = range.startOffset;
        var currentWrapper  = range.endContainer.parentElement.className;

          // if delete Keys pressed
          if (evt.keyCode == 8 || evt.keyCode == 46){

             if (startOffset == "0" && bootstrapElements.indexOf(lastContainer)>-1 ){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
             }


          }

        lastContainer = currentWrapper;


    });



});