TinyMCE 笑脸插件 - 更改插入笑脸的宽度答案

【问题标题】：TinyMCE Smileys plugin - change width of inserted smileyTinyMCE 笑脸插件 - 更改插入笑脸的宽度
【发布时间】：2016-04-17 12:14:35
【问题描述】：

我将 this plugin 用于 TinyMCE 所见即所得编辑器。

添加的表情是 72x72 像素，但我希望它们显示为 20x20 像素。

当您从列表中单击笑脸时，它会在编辑器主体内创建一个元素，如下所示：

<img title="smile" src="https://twemoji.maxcdn.com/2/72x72/1f600.png" data-mce-src="https://twemoji.maxcdn.com/2/72x72/1f618.png">

我如何在它创建元素时添加style="width:20px"？

我的 TinyMCE 初始化是：

  tinymce.init({
    selector: '.main-textarea',
    height: 300,
    menubar: "insert format",
    plugins: [
      'advlist lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'smileys template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media',
    toolbar2: 'forecolor smileys',
    smileys:[
     [
         { shortcut: ':)', url: 'https://twemoji.maxcdn.com/2/72x72/1f600.png', title: 'smile' },
         { shortcut: ':\')', url: 'https://twemoji.maxcdn.com/2/72x72/1f602.png', title: 'cwl' },
         { shortcut: ':*', url: 'https://twemoji.maxcdn.com/2/72x72/1f618.png', title: 'blowkiss' }
     ]
    ],
    auto_convert_smileys: true,
    image_advtab: true,
    content_css : "https://fonts.googleapis.com/css?family=Open+Sans:400,600"
   });

我尝试在插件源代码中添加样式，但没有任何效果。

【问题讨论】：

标签： javascript css tinymce

【解决方案1】：

能够解决它。我取消了源代码，底部是这样的：

n.addButton("smileys", {
    type: "panelbutton",
    icon: "emoticons",
    panel: {
        autohide: !0,
        html: e,
        onclick: function(t) {
            var i = n.dom.getParent(t.target, "a");
            i && (n.insertContent('<img src="' + i.getAttribute("data-mce-url") + '" title="' + i.getAttribute("title") + '" class="emoji" style="width:20px">'), this.hide())
        }
    },
    tooltip: "Smileys"
})

我加了class="emoji" style="width:20px"

到

n.insertContent('<img src="' + i.getAttribute("data-mce-url") + '" title="' + i.getAttribute("title") + '" class="emoji" style="width:20px">')

【讨论】：

【解决方案2】：

您可以添加一个与 img 标题匹配的 CSS 类：

img[title=smile] {
    width: 20px;
}

另一种解决方案是使用大小为 20 x 20 的图像。

【讨论】：