Protect DIV element from being deleted within TinyMCE

2 Views

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;

Read More
<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.

Post Views: 2

Related posts

Leave a Reply

4 comments

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

  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;


    });



});

  3. 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>

  4. Here is the solution I used (using jQuery for dom manipulation):

    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();