防止在TinyMCE中删除DIV元素

Protect DIV element from being deleted within TinyMCE

本文关键字：删除 DIV 元素 TinyMCE      更新时间：2023-09-26

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

例如；

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

在TinyMCE编辑器中，我希望用户能够删除他/她的"内容"，但当涉及到删除时，应禁止退格/删除键。

我想到了一些类似的东西；

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

由于用户在TinyMCE可视化窗格中看不到HTML，因此可以允许仅在中的内容可编辑，并且一旦识别为空，则禁用所有删除功能（鼠标/键盘）以保留div。

我希望这是有意义的，如果不是，请告诉我，我会尽力提供一些进一步的信息。我到处寻找潜在的解决方案，但我不确定解决这个问题的最佳方法。

谢谢。

我写了一个插件，它的灵感来自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"]
    ...
})

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

    });

});

据我所知，最接近的是NonEditableContent，但这不会保护div本身不被删除。还有一个只读模式，它根本不允许您编辑任何内容。

您可能可以挂接TinyMCE以防止删除受保护的DIV，但我认为您最好的选择是在编辑器中完全不包含DIV，并允许用户编辑其内容。更新内容后，您可以使用您的平台将用户的内容放入div.…

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

这是我使用的解决方案（使用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();
相关文章：