3

当前的 tinyMCE 版本 (3.5.2)。

你好，

我正在开发一个添加和删除自定义格式的自定义插件。

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

我确实找到了 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>

案例 1（由 Jeffery To 覆盖）

选择整个段落应该会给你以下结果

 <p>abcdef</p>

案例2

仅选择 f 应该会给您以下结果

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

案例3

只选择 cd 应该会给你以下结果

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

2 回答 2

4

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]);
    }
}

演示

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

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

然后formatter.remove('demo_format_1')按您的预期工作（演示）。

于 2012-06-21T16:42:01.093 回答
1

您应该执行以下操作：

  1. 获取用户选择触及的所有段落
  2. 获取这些段落下的所有节点
  3. 检查选择范围是否触及节点
  4. 如果是：从其类元素中删除“不需要的”类

稍后我将为此提供一些代码。

于 2012-06-18T11:26:49.917 回答