时间戳

首页 > 解决方案 > TinyMCE 在编辑器中的特定内容上禁用工具栏按钮

tinymce - TinyMCE 在编辑器中的特定内容上禁用工具栏按钮

问题描述

我已经为特定的 div 配置了 TinyMCE。但是，在这个 div 中，有一些子内容是不可编辑的。考虑以下 HTML：

<div class="editor">
    <p> Hello World </p>
    <p> This is a test </p>
    <div class="special-div">
        <p> Hello test </p>
    </div>
</div>

我已经这样设置了 TinyMCE：

tinymce.init({
   selector: ".editor",
   inline: true,
   toolbar: ["formatselect | bold italic | alignleft aligncenter alignright | bullist numlist"]
})

在这种情况下，我希望当用户单击 时.special-div，工具栏按钮被禁用。

我尝试过使用以下selector参数：

selector: ".editor :not(.special-div)"

但是它不起作用。我还发现有一个参数叫editor_deselector，但这仅适用于 TinyMCE v3，我使用的是 v4。我发现可以通过使用内部 TinyMCE api 来做到这一点，例如将每个按钮设置为禁用状态，但我想知道是否可以开箱即用。

主要关注的是工具栏本身而不是内容，mceNonEditable甚至contentEditable="false"可以阻止 TinyMCE 对其应用任何内容。这更像是一个用户体验问题，因为我不希望人们认为他们可以格式化.special-div.

如果无法禁用它们，有没有办法在我选择时隐藏工具栏.special-div？

标签： tinymcetinymce-4

解决方案

var ctrlmanager;
editor.onNodeChange.add(function (editor, controlManager, node) {
                ctrlmanager = controlManager;
controlManager.setDisabled('lngQuoteList_Uk', (node.nodeName == 'TD' || $(node).parents('TD').length > 0) || (node.className == 'del cts-1' && node.nodeName == 'SPAN'));
 });

推荐阅读