TinyMCE 将类添加到 img 标签答案

【问题标题】：TinyMCE add class to img tagTinyMCE 将类添加到 img 标签
【发布时间】：2013-04-19 18:11:38
【问题描述】：

我在我的 CMS 中使用 TinyMCE 编辑器作为独立编辑器。

默认情况下，该网站会在 cms div ID 内的任何图像标签周围放置一个弧形边框。

我需要有一个选项，在 CMS 中通过添加 class="no-style" 在极少数情况下添加到页面的图像不应该有 CSS 边框。但是我看不出有任何方法可以用 TinyMCE 做到这一点..

我所看到的只是一种输入样式标签的方法，但这不起作用，因为我在 CSS 中用来制作边框的代码是这样的：

-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); behavior: url(js/PIE.htc);

所以每次我需要制作一个没有边框的图像时将所有这些设置为 0px 非常耗时，更不用说对于普通人来说太多了。

所以在这个页面上：http://d.pr/i/wslc

有没有办法有一个下拉菜单或一个文本框，有人可以在其中输入“就像样式一样”一个类名，例如 style.css 中的 no-style 将我上面的那些属性归零?

谢谢！

【问题讨论】：

标签： php javascript css tinymce wysiwyg

【解决方案1】：

你需要根据https://www.tinymce.com/docs/plugins/image/#image_class_list定义一个预定义类的列表

将以下内容添加到tinymce.init

image_class_list: [
    {title: 'None', value: ''},
    {title: 'Lightbox', value: 'lightbox'},
]

输出

【讨论】：

不错的解决方案。谢谢

【解决方案2】：

TinyMCE 对此有支持。

添加新图像 (Insert/Add Image-popup) 时，单击标有 Appearance 的标签。在显示Class 的下拉列表中，选择Value 并输入no-style。我认为您可以自定义 TinyMCE 以支持您自己的类（即，它已经列出），但我不确定您如何做到这一点。如果您不想每次都手动输入，查看文档应该会有所帮助。

编辑：啊，我在回答之前没有看图片。看起来你有一个过时的 TinyMCE 版本。在网页上，上述下拉菜单可用：Official site。

Superedit：如果您已经拥有最新版本，请查看您正在加载的插件。查看官方网站的来源并与您自己的进行比较。

【讨论】：

【解决方案3】：

尝试在 tinyMCE 中将代码置于 html 模式。

【讨论】：