0

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

<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 吗？

4

1 回答 1

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 应用于编辑器内的内容，就像稍后在编辑器之外的其他地方呈现时应用到该内容一样。

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

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

extended_valid_elements: 'i[*]',

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

编辑添加：

我什至如何配置 Tiny 以便它始终在<i>元素之后添加<li>元素？

一种方法是在 TinyMCE 的序列化程序上使用节点过滤器来添加<i>元素作为元素的第一个子<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(). 这意味着该<i>元素不是实时添加的，因为插入了列表元素，而是将<li>在序列化程序运行时添加到任何/所有元素（还没有它），包括触发保存时，或者当已发布包含 TinyMCE 的表单。

于 2021-02-08T18:37:02.797 回答