时间戳

首页 > 解决方案 > 如何将属性添加到由 tinymce 创建的 codesample pre 块

attributes - 如何将属性添加到由 tinymce 创建的 codesample pre 块

问题描述

我的博客上有一个 TLDR 开关。这个开关是一个 javascript，它隐藏任何带有 class="tldr" 属性的元素，或者取消隐藏它。

我在 TinyMCE 中为 Paragraphs 创建了自定义 block_formats，这将让我创建一个附加了 TLDR 类的 Paragraph。

但是，当我使用该插件插入代码示例时，它会生成一个我之后无法格式化的预块。我已经尝试使用 TLDR 类创建自定义 PRE 块，但 TinyMCE 不允许我将此格式应用于已创建的代码示例块。

有没有人对我的问题有另一种解决方案，或者你能看看我是否做错了什么？TinyMCE 中是否有另一种方法可以为已经添加到代码中的元素添加属性？我已经尝试过代码查看器，但这不允许我修改生成的 HTML 代码。

标签： attributestinymce

解决方案

您可以使用formats和style_formats自定义可供用户使用的样式选项及其操作方式。

要添加自定义pre块class="tldr"，您可以将此配置添加到 TinyMCE：

style_formats: [
    // Adds a pre format to style_formats that applies a 'tldr' class
    { title: 'TLDR', block: 'pre', classes: 'tldr' }
]

看到这个 TinyMCE 小提琴： http: //fiddle.tinymce.com/Ikhaab

就其本身而言，这将覆盖默认样式格式，但您可以将它们重新添加并在 Blocks 子菜单中放置新的 TLDR 选项，如下所示：http: //fiddle.tinymce.com/Jkhaab

资源：

推荐阅读