javascript - tinyMCE - 将 RemoveFormat 限制为格式列表

Question

当前的 tinyMCE 版本 (3.5.2)。

你好，

我正在开发一个自定义插件，它可以添加和删除 custom formats .

向当前选择添加格式很简单，但我做不到找到一个合适的解决方案来删除多种格式。

我确实找到了 RemoveFormat 命令:

tinymce.activeEditor.execCommand('RemoveFormat');
// which is the same as 
tinymce.activeEditor.formatter.remove('removeformat');

这个函数确实删除了当前选择的任何格式这绝对足够了，因为我只想删除一些格式。

所以我尝试为每种格式调用remove方法

tinymce.activeEditor.formatter.remove('format_1');
tinymce.activeEditor.formatter.remove('format_2');
...

但是这也不成功，因为它没有删除嵌套格式。如果您选择以下段落并调用 tinymce.activeEditor.formatter.remove('format_2');，它将不删除该格式，因为该段落未使用此格式本身。

<p class="format_1">abcd<span class="format_2>ef</span>g</p>

有什么方法可以像 RemoveFormat 那样删除元素及其所有子元素的格式？

---

更新(@Thariama)

我所有的格式都是具有以下结构的自定义格式:

  "demo_format_1" : { 
      "classes" : "demo_format_1",
      "deep" : true,
      "exact" : false,
      "inline" : "span",
      "selector" : "*",
      "title" : "Demo Format"
   }}

---

更新:

再次实现后，我发现了更多案例。以下是我想到的所有特殊情况的示例:

删除格式前的文字:

<p>abc<span class=demo_format_1>def</span></p>

Case 1(覆盖so Jeffery To)

选择整个段落应该会得到以下结果

 <p>abcdef</p>

案例二

仅选择 f 应该会得到以下结果

<p>abc<span class=demo_format_1>de</span>f</p>

案例三

只选择 cd 应该会得到以下结果

<p>abcd<span class=demo_format_1>ef</span></p>

Answer 1

tinymce.Formatter.remove可以在特定节点上调用，因此:

var selection = ed.selection.getSel(),
    ancestor = ed.selection.getNode(),
    els = ancestor.getElementsByTagName('span'),
    l = els.length,
    i = 0;
if (selection.containsNode(ancestor, true) && ancestor.nodeName.toLowerCase() === 'span') {
    ed.formatter.remove('demo_format_2', null, ancestor);
}
for ( ; i < l; i++) {
    if (selection.containsNode(els[i], true)) {
        ed.formatter.remove('demo_format_2', null, els[i]);
    }
}

Demo

---

更新:原来问题是由格式中包含 inline 和 selector 引起的，这将其标记为“混合”(内联+ block 级)。如果您仅使用 inline 定义格式:

demo_format_1: {
    inline: "span",
    classes: "demo_format_1"
}

然后 formatter.remove('demo_format_1') 将按您预期的方式工作 (demo)。