Protect DIV element from being deleted within TinyMCE Protect DIV element from being deleted within TinyMCE wordpress wordpress

Protect DIV element from being deleted within TinyMCE


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"]    ...})


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 CLASStinymce.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;    });});


The closest, as far as I know, you'll get is with NonEditableContent but that won't protect the DIV itself from being deleted. There is also a ReadOnly mode wich won't let you edit anything at all.

You might be able to hook into TinyMCE to prevent deletion of the protected DIV but I think your best bet is not including the DIV at all in the editor and letting users just edit it's contents. After updating the content you can use your platform to put the user's content in the div...

<div class="name">    <?php echo $content ?></div>