Защитите элемент DIV от удаления в TinyMCE

Question

Я пытаюсь создать сценарий, в котором можно удалить ТОЛЬКО контент внутри DIV, а не сами теги DIV в редакторе TinyMCE, используемом в WordPress.

Например;

<div class="name">

content

</div>

В редакторе TinyMCE я бы хотел, чтобы пользователь мог удалить свое «содержимое», но для удаления клавиши возврата / удаления, когда речь идет об удалении, его следует запретить.

Я подумал, может быть, что-то вроде;

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

Поскольку пользователь не видит HTML-код на визуальной панели TinyMCE - возможно, будет возможно разрешить редактировать содержимое ТОЛЬКО внутри, а после того, как он будет признан пустым, все функции удаления (мышь / клавиатура) отключены для сохранения div.

Надеюсь, это имеет смысл, если нет, пожалуйста, дайте мне знать, и я постараюсь предоставить дополнительную информацию. Я искал потенциальные решения все выше и ниже, но я не уверен, что это лучший способ решить эту проблему.

Спасибо.

Answer 1

Я написал плагин, который был вдохновлен кодом Corepany.

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

Он работает с нередактируемым плагином tinymce и теоретически делает его таким образом, что вы не можете удалить нередактируемые области.

Я сделал это для своих собственных целей, но загрузил, чтобы любой желающий со мной мог его использовать.

См:

https://jsfiddle.net/5a5p5vz7/

Использование:

index.html

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

somefile.js

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

Answer 2

Здравствуйте, у меня та же проблема, и я написал этот плагин без jQuery. Надеюсь, это поможет

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

Насколько я знаю, вы получите с NonEditableContent , но это не защитит сам DIV от удаления. Существует также режим ReadOnly , который вообще не позволяет вам ничего редактировать.

Возможно, вы сможете подключиться к TinyMCE, чтобы предотвратить удаление защищенного DIV, но я думаю, что вам лучше вообще не включать DIV в редактор и разрешать пользователям просто редактировать его содержимое. После обновления контента вы можете использовать свою платформу для помещения контента пользователя в раздел ...

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

Answer 4

Вот решение, которое я использовал (используя jQuery для манипуляций с 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();