插入时向 CkEditor 笑脸添加类或内联样式答案

【问题标题】：Add class or inline style to CkEditor Smiley when inserted插入时向 CkEditor 笑脸添加类或内联样式
【发布时间】：2017-04-08 17:25:30
【问题描述】：

我在构建电子邮件模板的程序中使用 Ck Editor。每个电子邮件模板都有自己的样式，可以覆盖内容块内的文本。

因此，目前当我使用 Ck Editor 在文本块中添加笑脸时，模板样式会在文本块内的图像中添加向左浮动和显示块。

这意味着所有的笑脸都向左浮动。

有没有一种方法可以将内联样式添加到插入的实际笑脸图像中，使其看起来像这样：

<img alt="cool" height="23" src="/vendors/ckeditor/plugins/smiley/images/shades_smile.png" title="cool" width="23" style="float: none; display: inline-block;">

提前谢谢你。

【问题讨论】：

看到这个类似的问题：stackoverflow.com/questions/29014728/…

标签： ckeditor

【解决方案1】：

您可以尝试在插入元素时检查 src 属性是否包含例如“笑脸”之类的字符串，然后向元素添加类或内联样式：

CKEDITOR.replace('editor1', {
  on: {
    insertElement: function(e) {
      if (e.data.getName() !== 'img') return;
      if (e.data.getAttribute('src').indexOf('smiley') > -1) {
        e.data.addClass('smiley-class');
      }
    }
  }
});

<script src="https://cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
<textarea name="editor1"></textarea>

【讨论】：