上下文：

TinyMce有一个允许使元素不可编辑的noneditable插件。如果一个元素具有类别，则TinyMce将使该元素不可编辑。将基本样式应用于TinyMce中的不可编辑元素

问题：

我希望能够与基本样式标签来包装这个不可编辑的元素。

例如，如果我有：

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/

我的尝试：

配置不可编辑插件不同（https://www.tinymce.com/docs/plugins/noneditable/）
使用data-mce-contenteditable属性覆盖不可编辑单击按钮时的行为。（See usage in TinyMce source code in DOMUtils.js line 1739）
绕过内容可编辑检测。（See in TinyMce source code in Formatter.js line 609）
建立自己的插件（看起来像它不可能与一个插件来解决这一问题）

我真的希望你能帮助！

来源

2016-11-30 Timothée Jeannin

我相信你可以用一个简单的自定义工具栏按钮来完成这个工作，你可以添加到你的TinyMCE配置中。

当你点击一个不可编辑的元素时，你会有效地得到一个DOM节点，它是整个不可编辑的元素。您可以绝对使用DOM操作为该元素添加样式，或者将该元素包装到另一个标签中。例如看到这个TinyMCE的小提琴：

http://fiddle.tinymce.com/sDfaab

当您单击不可编辑的元素，然后单击Add Style to Node按钮，您会注意到，整个非编辑元素获取加粗的文字一个新的内嵌样式。

来源

2016-11-30 20:24:32

是的，但这意味着我必须重新编码TinyMce的所有样式功能。这可能是一大笔工作...... –

因此，当某些东西是“不可编辑的”时，它就是这个意思 - 它不能被编辑，所以TinyMCE不允许你编辑内容。如果你想要某些东西“大部分”是不可编辑的，你将不得不做一些编码来实现这一点。不可编辑的东西依赖于封面下的'contenteditable'以及浏览器如何解释该属性，所以默认行为与浏览器处理'contenteditable =“false”'的方式密切相关。 –

是的，你是对的。这完全取决于是否通过“不可编辑”来表示“内容+风格”或“内容”。问题是，如果我将' ok'转换为' ok'我根本没有碰过这个元素......只是看起来像一个有效的使用案例给我... –

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

上下文：

问题：

我的尝试：

回答

相关问题