TinyMCE 4 - 将自定义样式/类/属性添加到任何 HTML 标签答案

【问题标题】：TinyMCE 4 - add custom styles/classes/attributes to any HTML tagTinyMCE 4 - 将自定义样式/类/属性添加到任何 HTML 标签
【发布时间】：2015-05-11 21:36:09
【问题描述】：

是否有任何插件/可能性允许通过 TinyMCE 4 WYSIWYG 向 HTML 标签添加自定义属性？

例如，我通过编辑器添加了这段代码（不是通过源代码）：

<div dir="ltr">
    <a href="/uploads/myfile.pdf">My file<img src="/uploads/icons/pdf-icon.jpg" alt="My file" width="40" height="40" /></a>
</div>

我所需要的只是将class="mypdffile" 或data-xxx="someval" 属性添加到上面代码中查看的<div> 标记。

如何在不更改 tinymce.init 中的配置对象的情况下做到这一点？

【问题讨论】：

所以当前配置不允许您访问源视图？
确实如此，但是当我通过源代码编辑代码并保存时，TinyMCE 将源代码更改为默认值（未经我修改）。
您是否可以对其他区域的来源进行编辑，或者只是这一个在播放？您是否尝试过使用该类添加一个新的 div 而不是编辑外部的？
是的，我可以对源代码进行编辑。是的，我添加了新的div 与特定的类 - 它工作。但仍然......我认为存在任何用户界面。
通常类等没有 gui 控件，但必须通过源代码编辑器完成 - 我认为最接近的是添加页面锚链接。

标签： html css tinymce tinymce-4

【解决方案1】：

通过初始化，您可以将样式菜单添加到编辑器中，您可以在其中创建适用于 div 的样式并将其命名为 class="mypdffile"

tinymce.init({
    style_formats: [
        {title: 'My PDF file', selector: 'div', classes: 'mypdffile'}
    ]
});

【讨论】：