TinyMCE 5:插入时总是向块引用元素添加一个类(通过单击工具栏上的“块引用"按钮) [英] TinyMCE 5: Always add a class to blockquote element when inserting it (by clicking on the "blockquote" button on toolbar)

问题描述

当用户点击blockquote"时按钮(即在工具栏上)插入 blockquote 元素:

然后 TinyMCE 将插入没有任何类的

HTML 元素.我想改变这一点，以便它总是插入

和 myClass 类(但 只有通过单击工具栏"按钮插入，而不是在加载时插入):

...</p></blockquote>

你知道如何做到/实现吗?

我使用的是 TinyMCE 5.

小提琴: http://fiddle.tinymce.com/Guhaab

---

更新:

抱歉，我的问题不够精确:我希望只为通过按钮添加的元素添加这个类，不是加载时.

解决方案

更新答案:

询问者补充:

<块引用>

我希望这个类只为通过按钮添加的元素添加，而不是在加载时添加.

在这种情况下:通过应用称为(您猜对了)blockquote"的预定义默认格式将块引用添加到内容中.您可以覆盖该默认样式以在应用于内容时包含一个类:

格式:{//将 blockquote 的默认格式更改为具有 'foo' 类块引用:{块:'blockquote'，类:'foo'}},

这是一个小小提琴演示:

http://fiddle.tinymce.com/svhaab/1

以下是有关 TinyMCE 格式的信息:

https://www.tiny.cloud/docs/configure/content-格式/

---

原始答案:

一种选择是使用节点过滤器将此类添加到所有

元素:

https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilterhttps://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.domparser/#addnodefilter

这是一个小小提琴示例:http://fiddle.tinymce.com/hvhaab/1(预计到达时间正确的 Fiddle 链接)

注意:正如在 Fiddle 中看到的，这种方法还会将类添加到 <blockquote> 元素中，这些元素作为现有内容加载或粘贴到编辑器中 - 而不仅仅是 <blockquote> 通过按钮添加的元素.

此外，如果

元素已经有一个(不同的)类，这会将您的自定义类添加到属性中.

When user clicks on "blockquote" button (that is on toolbar) to insert blockquote element:

then TinyMCE will insert <blockquote> HTML element without any class. I want to change this so that it always inserts <blockquote> with class myClass (but only when blockquote is inserted by clicking on "toolbar" button, not when loaded):

<blockquote class="myClass">
    ...
    </p>
</blockquote>

Do you know how this can be done/achieved?

I'm using TinyMCE 5.

Fiddle: http://fiddle.tinymce.com/Guhaab

---

UPDATE:

Sorry, my question wasn't precise enough: I want this class to be added just for elements added via the button, not when loaded.

解决方案

Updated Answer:

The querent added:

I want this class to be added just for elements added via the button, not when loaded.

In that case: Blockquotes are added to content by applying a predefined, default format called (you guessed it) "blockquote". You can override that default style to include a class when it is applied to content:

formats: {
    // Changes the default format for blockquote to have a class of 'foo'
    blockquote: { block: 'blockquote', classes: 'foo' }
  },

Here is a Tiny Fiddle demonstration:

http://fiddle.tinymce.com/svhaab/1

Here's information about formats in TinyMCE:

https://www.tiny.cloud/docs/configure/content-formatting/

---

Original Answer:

One option would be to use a node filter to add this class to all <blockquote> elements:

https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.domparser/#addnodefilter

Here is a Tiny Fiddle example: http://fiddle.tinymce.com/hvhaab/1 (ETA correct Fiddle link)

Note: As seen in the Fiddle, this approach will also add the class to <blockquote> elements that are loaded or pasted in to the editor as existing content - not just <blockquote> elements added via the button.

Also, if a <blockquote> element already has a (different) class, this will add your custom class to the attribute.

这篇关于TinyMCE 5:插入时总是向块引用元素添加一个类(通过单击工具栏上的“块引用"按钮)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！