将基本样式应用于TinyMce中的不可编辑元素

Question

Context:

TinyMce有一个noneditable插件，允许使元素不可编辑。如果一个元素具有mceNonEditable类，那么TinyMce将使该元素不可编辑。

Problem:

我希望能够使用基本样式标记包装此不可编辑的元素。

例如，如果我有：

Hello <span class="mceNonEditable">user_name</span> how are you today ?

如果我单击user_name选择不可编辑的范围，然后单击TinyMce Blod按钮。

我希望结果如下：

Hello <b><span class="mceNonEditable">user_name</span></b> how are you today ?

但不是这样，没有任何事情发生。当我单击TinyMce Blod按钮时，代码不会改变。

我创建了一个小jsFiddle来演示这个：https://jsfiddle.net/timotheejeannin/2hhpenm5/

What I tried:

以不同方式配置不可编辑的插件（qazxsw poi）
单击按钮时，使用https://www.tinymce.com/docs/plugins/noneditable/属性覆盖不可编辑的行为。（data-mce-contenteditable）
绕过内容可编辑检测。（See usage in TinyMce source code in DOMUtils.js line 1739）
构建我自己的插件（看起来不可能通过插件解决问题）

我真的希望你能帮忙！

Answer 1

这是我的解决方法。可能会出现故障。

See in TinyMce source code in Formatter.js line 609

Answer 2

我相信您可以使用一个简单的自定义工具栏按钮来执行此操作，您可以将其添加到TinyMCE配置中。

当您单击不可编辑的元素时，您将有效地获得一个DOM节点，该节点是整个不可编辑的元素。然后，您绝对可以使用DOM操作向该元素添加样式或将该元素包装在另一个标记中。例如，看看这个TinyMCE小提琴：

tinyMCE.init({ /*your initializer settings*/ setup: function (ed) { ed.on('ExecCommand', function(e) { var selection = tinyMCE.activeEditor.selection.getContent(); var el = document.createElement( 'html' ); el.innerHTML = "<head></head><body>"+selection+"</body>"; var datapoints = Array.from(el.getElementsByClassName('mceNonEditable')); if (datapoints.length>0) { var styleToggle = function(key, value) { var criteria = (datapoints.map(function(datapoint){ return (datapoint.style[key] == value); }).reduce(function(a,b) { return a&&b; })); if (criteria) { datapoints.forEach(function(datapoint){ datapoint.style[key] = ""; datapoint.contentEditable = false; }); } else { datapoints.forEach(function(datapoint){ datapoint.style[key] = value; datapoint.contentEditable = false; }); }; } switch (e.command) { case 'mceToggleFormat': switch (e.value) { case 'bold': styleToggle("font-weight", "bold"); break; case 'italic': styleToggle ("font-style", "italic"); break; case 'strikethrough': styleToggle ("text-decoration", "line-through"); break; case 'underline': styleToggle ("text-decoration", "underline"); }; tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML); break; case ("mceApplyTextcolor"): styleToggle ("color", e.value); tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML); break; case ("FontName"): styleToggle ("font-family", e.value); tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML); break; case ("FontSize"): styleToggle ("font-size", e.value); tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML); break; case ("RemoveFormat"): datapoints.forEach(function(datapoint){ ["font-weight", "font-style", "text-decoration", "text-decoration", "color", "font-family", "font-size"].forEach(function(key){ datapoint.style[key]=""; }) datapoint.contentEditable = false; }); tinyMCE.activeEditor.selection.setContent(el.children[1].innerHTML); break; }; } }); /*more stuff*/ } });

当您单击不可编辑的元素并单击http://fiddle.tinymce.com/sDfaab按钮时，您将注意到整个不可编辑的元素将获得一个粗体文本的新内联样式。

Answer 3

这适用于基本格式。

更新：根据建议改变选择是不可靠的，因为TinyMCE会在之前和之后处理此事件，并且会搞砸......最好的方法是将ID分配给不可编辑的对象并在ExecCommand上直接更改为DOM ！因此，在选择中获取对象ID，然后在DOM中更改它们的样式...而不是在字符串HTML选择中。

这是基于以上答案的旧代码（仅用于灵感）：

Add Style to Node

将基本样式应用于TinyMce中的不可编辑元素

问题描述投票：4回答：3

Context:

Problem:

What I tried:

3个回答

最新问题

将基本样式应用于TinyMce中的不可编辑元素

问题描述 投票：4回答：3

Context:

Problem:

What I tried:

3个回答

最新问题

问题描述投票：4回答：3