Protect DIV element from deletion in TinyMCE

Question

I'm trying to create a script in which you can ONLY remove content in a DIV, not the DIV tags in the TinyMCE editor that is used in WordPress.

For instance:

<div class="name"> content </div> 

In the TinyMCE editor, I would like the user to be able to delete their “content”, but in order for the backspace / delete key to be disabled when it comes to deleting it, they should be prohibited.

I was thinking of something like:

 <div class="name"> <!-- editable --> content <!-- end editable --> </div> 

Since the user does not see the HTML code in the TinyMCE Visual area, it is probably only allowed for editable content, and after the recognition is empty, all delete functions (mouse / keyboard) will be disabled to save the div.

Hope this makes sense if you don't let me know and I will try to provide more information. I looked high and low for a potential solution, but I'm not sure the best way to solve this.

Thanks.

Answer 1

I wrote a plugin that was inspired by Corepany code.

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

It works with a plugin that is not editable, and theoretically makes it so that you cannot delete non-editable areas.

I did this for my own purposes, but downloaded it so that anyone with similar needs could use it.

Cm:

https://jsfiddle.net/5a5p5vz7/

Using:

index.html

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

somefile.js

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

Answer 2

The closest, as far as I know, you will get a NonEditableContent , but this will not protect the DIV itself from being deleted. There is also a ReadOnly mode that will not allow you to edit anything at all.

You may be able to connect to TinyMCE to prevent the removal of the protected DIV, but I think that your best choice does not include the DIV at all in the editor and allows users to simply edit its contents. After updating the content, you can use your platform to place custom content in a div ...

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

Answer 3

Hello, I have the same problem and I wrote this plugin using jQuery. Hope this 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; }); }); 

Answer 4

Here is the solution I used (using jQuery to manipulate dom):

 var settings = { init_instance_callback: function (ed) { insertWrapper(ed.contentDocument.body); //insert wrapper when editor is initialized }, setup: function (editor) { editor.onGetContent.add(function (ed, o) { o.content = $(o.content).unwrap().html(); // remove wrapper prior to extracting content }); editor.onKeyUp.add(function (ed, e) { insertWrapper(ed.contentDocument.body); // if wrapper has been deleted, add it back }); } }; function insertWrapper(body){ if($(body).find('#body-wrapper').length == 0){ $(body).wrapInner('<div id="body-wrapper" />'); } } new tinymce.Editor( '#my-textarea', settings ).render();