在 tinyMCE 中，将格式应用于非可编辑区域答案

【问题标题】：In tinyMCE apply format to noneditabel areas在 tinyMCE 中，将格式应用于非可编辑区域
【发布时间】：2018-06-20 22:53:42
【问题描述】：

我将 tinyMCE 与“不可编辑”插件一起使用。

当我在 tinyMCE 编辑器中标记一些包含不可编辑区域的文本，然后将某种格式应用于此选择时，该格式将不会应用于不可编辑的片段。

例如：

我选择：

start Text <span class="mceNonEditable" data-mce-contenteditable="false">not editable area</span> end text

我想把它加粗，结果是：

<strong>start Text  </strong><span class="mceNonEditable" data-mce-contenteditable="false">not editable area</span><strong> end text</strong>

我的期望和需要如下：

<strong>start Text  <span class="mceNonEditable" data-mce-contenteditable="false">not editable area</span> end text</strong>

我该怎么做才能让不可编辑的片段也被格式化？

（我使用的是 tinyMCE 4.1.10）

【问题讨论】：

我也面临同样的问题，使用的是 3.5.10 版本。
我找到了解决方法。看这里：community.tinymce.com/forum/viewtopic.php?pid=118212#p118212 是否也适用于 3.5.10 版？
谢谢吉奥！它也适用于 3.5.10 版本。干杯！
我遇到了同样的问题，您的链接似乎不再有效。你能发布一个解决方案吗？谢谢
很遗憾，这个链接已经失效了。我对文件 /tinymce/classes/Formatter.js 进行了更改：我会将我的更改附加为新答案

标签： javascript tinymce tinymce-4

【解决方案1】：

我知道它有点老问题，但仍然是该问题的第一个搜索结果之一......
我们在外队遇到了同样的问题，
我们通过下拉选择向内容添加了不可编辑的文本，并且发生了给你
当我们在编辑器中选择文本范围并尝试格式化时，不可编辑的元素被忽略了。
我通过将非编辑内容（跨度元素）与另一个跨度包装（跨度元素）结合起来解决，
现在选择文本范围时，外部跨度获取所选格式并影响内部跨度（不可编辑）。

<span class="someClass"><span class="mceNonEditable">Non Editable Text</span></span>

* 外部元素必须有类，tinymce 不会清除它。

【讨论】：

几乎可以工作。我发现的唯一问题是，如果我尝试拖动元素，则不可编辑的元素会被拖出周围的跨度

【解决方案2】：

tinymce 论坛中的解决方法是操作文件： /tinymce/classes/Formatter.js

在函数中：

function applyRngStyle(rng, bookmark, node_specific)
{

....
                        // Is it valid to wrap this item
                        // TODO: Break this if up, too complex
                        if (contentEditable && !hasContentEditableState && isValid(wrapName, nodeName) && isValid(parentName, wrapName) &&
                                !(!node_specific && node.nodeType === 3 &&
                                node.nodeValue.length === 1 &&
                                node.nodeValue.charCodeAt(0) === 65279) &&
                                !isCaretNode(node) &&
                                (!format.inline || !isBlock(node))) {
                            // Start wrapping
.....

}

我不得不取消注释“contentEditable && !hasContentEditableState”

function applyRngStyle(rng, bookmark, node_specific)
{

....
                        // Is it valid to wrap this item
                        // TODO: Break this if up, too complex
                        // This are the changes that I made:
                        if (/*contentEditable && !hasContentEditableState &&*/ isValid(wrapName, nodeName) && isValid(parentName, wrapName) &&
                                !(!node_specific && node.nodeType === 3 &&
                                node.nodeValue.length === 1 &&
                                node.nodeValue.charCodeAt(0) === 65279) &&
                                !isCaretNode(node) &&
                                (!format.inline || !isBlock(node))) {
                            // Start wrapping
.....

}

【讨论】：