保护 DIV 元素在 TinyMCE 中不被删除答案

【问题标题】：Protect DIV element from being deleted within TinyMCE保护 DIV 元素在 TinyMCE 中不被删除
【发布时间】：2012-04-09 00:29:40
【问题描述】：

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

例如；

<div class="name">

content

</div>

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

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

<div class="name">

<!-- editable -->

content

<!-- end editable -->

</div>

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

我希望这是有道理的，如果没有，请告诉我，我会尝试提供一些进一步的信息。我一直在寻找潜在的解决方案，但我不确定解决这个问题的最佳方法。

谢谢。

【问题讨论】：

标签： javascript jquery wordpress tinymce

【解决方案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"]
    ...
})

【讨论】：

【解决方案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;


    });



});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

您好，Rob，感谢您的回复。不包含 DIV 很容易，但是我正在使用这篇文章 link 中的这种模板自定义方法，它允许我根据用户的各种配置来布局编辑器。所以不能删除 DIV 是可用性的关键部分。我认为您对 ReadOnly 的看法是正确的。我查看了 NonEditableContent 但它不够。现在的问题是如何连接到 ReadOnly。 TinyMCE 源看起来来势汹汹。 :)
我想知道这条路是否正确-> link
嗯，这确实可以解决问题。没有想过以这种方式使用它并且以前从未这样做过，所以您可能只想尝试一下:)

【解决方案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();

【讨论】：