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.
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 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;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With