在 TinyMCE 中添加自定义 html 和 css

Question

我正在使用 TinyMCE，我想在输出中添加自定义 html/css。在 Tiny 编辑器中创建的所有项目符号列表都应该有这些 css 类和一个  标签，如下所示：

<ul class="iconlist">
    <li><i class="icon-double-angle-right"></i> Item 1</li>
    <li><i class="icon-double-angle-right"></i> Item 2</li>
</ul>

有什么方法可以让 Tiny 输出所有项目符号列表的精确 html 吗？

Answer 1

已编辑：我已修改此答案以回应 OP

的评论

您可以使用 content_css 或 content_style 配置选项将自定义 CSS 应用于编辑器内容：

https://www.tiny.cloud/docs/configure/content-appearance/#content_css

https://www.tiny.cloud/docs/configure/content-appearance/#content_style

许多 Tiny 实施者使用它来将相同的 CSS 应用于编辑器内的内容，就像稍后在编辑器外的其他地方呈现时将应用于该内容。

但是，要使图标在编辑器中按预期显示，您还需要配置编辑器以允许空  元素。默认情况下，空的  元素会从编辑器中移除。您可以使用 extended_valid_elements: 配置选项更改此行为：

https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements

extended_valid_elements: 'i[*]',

所有这些都将允许使用  元素的外部图标库在 TinyMCE 中运行（缺少每个库可能需要的特定设置）。

编辑添加：

how do I even configure Tiny so that it always adds the  element after an <li> element?

一种方法是在 TinyMCE 的序列化器上使用节点过滤器来添加  元素作为 <li> 元素的第一个子元素。这是一个 Tiny Fiddle 示例（使用 Font Awesome 图标）：

https://fiddle.tiny.cloud/R4haab

文档：

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

在编辑器中获取内容（即 DOM 节点）然后将其转换回基于字符串的 HTML 表示时使用序列化程序。所以在 getContent() 等调用中是运行。这意味着  元素不是实时添加的，因为列表元素是插入的，但是只要序列化程序将被添加到 any/all <li> 元素（还没有它）运行，包括触发保存时，或发布包含 TinyMCE 的表单时。

在 TinyMCE 中添加自定义 html 和 css

Adding custom html and css in TinyMCE

html

css

tinymce

tinymce-4

tinymce-5