tinyMCE - 将 RemoveFormat 限制为格式列表 [英] tinyMCE - limit RemoveFormat to a list of formats

问题描述

当前的 tinyMCE 版本 (3.5.2).

我正在开发一个自定义插件，用于添加和删除自定义格式.>

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

我找到的是 RemoveFormat 命令:

tinymce.activeEditor.execCommand('RemoveFormat');//这与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" : {类":demo_format_1"，深":真的，精确":假，内联":跨度"，选择器":*"，"title": "演示格式"}}

<小时>

更新:

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

去除格式前的文字:

<p>abcdef</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>

解决方案

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

var selection = ed.selection.getSel(),祖先 = ed.selection.getNode(),els = 祖先.getElementsByTagName('span'),l = els.length，我 = 0;if (selection.containsNode(ancestor, true) &&ancestor.nodeName.toLowerCase() === 'span') {ed.formatter.remove('demo_format_2', null, 祖先);}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:{内联:跨度"，课程:demo_format_1"}

然后 formatter.remove('demo_format_1') 如您所料(演示).

Current tinyMCE version (3.5.2).

Hi,

I am working on a custom plugin which adds and removes custom formats.

Adding a format to the current selection is simple however I couldn't find a fitting solution for removing multiple formats.

What I did find was the RemoveFormat command:

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

This function does remove any formats of the current selection and that is definitely to much as I want to remove only some of the formats.

So I tried to call the remove method for every format

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

However this wasn't successful either as it doesn't remove nested formats. If you select the following paragraph and call tinymce.activeEditor.formatter.remove('format_2'); it will NOT remove the format as the paragraph doesn't use this format itself.

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

Is there any way to remove a format of an element and also of all of its children like RemoveFormat?

---

Update (@Thariama)

All my formats are custom formats with the following structure:

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

---

Update:

After implementing this again I found further cases. Here are examples of all special cases which came to my mind:

Text before removing the format:

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

Case 1 (Covered with the so Jeffery To)

Selecting the whole paragraph should give you the following result

 <p>abcdef</p>

Case 2

Selecting only f should give you the following result

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

Case 3

Selecting only cd should give you the following result

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

解决方案

tinymce.Formatter.remove can be called on a specific node, so:

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

---

Update: Turns out the trouble is caused by including both inline and selector in the format, which marks it as "mixed" (inline + block level). If you define the format with only inline:

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

then formatter.remove('demo_format_1') works as you'd expect (demo).

这篇关于tinyMCE - 将 RemoveFormat 限制为格式列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！