Question

我正在尝试创建一个场景，其中只能删除DIV中的内容，而不是在WordPress中使用的TinyMCE编辑器中的DIV标签本身。

例如;

<div class="name">

content

</div>

在TinyMCE编辑器中，我希望用户能够删除他/她的“内容”，但是在删除时禁用退格/删除键，应该禁止这样做。

我想到的可能是某些东西;

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

由于用户没有在TinyMCE Visual窗格中看到HTML - 可能只允许其中的内容可编辑，一旦识别为空，则禁用所有删除功能（鼠标/键盘）以保留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

据我所知，最接近你的是NonEditableContent，但这并不能保护DIV本身不会被删除。还有ReadOnly模式，它不会让你编辑任何东西。

您可能可以挂钩到TinyMCE以防止删除受保护的DIV，但我认为您最好的选择是在编辑器中根本不包括DIV并让用户只编辑它的内容。更新内容后，您可以使用您的平台将用户的内容放入div ...

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

Answer 3

你好我有同样的问题，我用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 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();

保护DIV元素不被TinyMCE中删除

4 个答案: