TinyMCE微笑符号插件-更改插入的微笑符号的宽度
TinyMCE Smileys plugin - change width of inserted smiley
我将此插件用于TinyMCE wysiwyg编辑器。
添加的表情符号是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"
});
我试着在插件源代码中添加样式,但我什么都没用。
能够解决它。我取消了源代码的组合,底部是:
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">')
您可以添加一个与img
标题匹配的CSS类:
img[title=smile] {
width: 20px;
}
另一种解决方案是使用尺寸为20 x 20的图像。
相关文章:
- 在.csv文件中写入学位符号
- 使用相同的数据集绘制各种符号
- 微笑时间轴小部件添加自定义字段
- 将带点符号的属性(有时)传递给函数
- RegEx JavaScript:数字后的符号提取
- 如何在计算器符号为零时替换它
- 删除输入中输入的符号
- 如何在ReactJs中渲染重音符号
- 如何替换JavaScript字符串中除字母和数字之外的所有内容(空格/符号)
- 插入符号到底是什么
- 删除图形和数字之间的连字符(-)符号
- 浏览器intl.NumberFormat未正确显示货币符号
- JS toLocaleString始终显示货币符号,而不考虑区域设置
- 将插入符号位置移动到ContentEditable<DIV>
- 为更改的输入返回插入符号位置的逻辑
- 包含转义符号的正则表达式
- TinyMCE微笑符号插件-更改插入的微笑符号的宽度
- JavaScript正则表达式,带有URL激活以及微笑符号等
- 将文本转换为微笑符号
- 如何在angular.js中使用带代码的微笑符号[即:-)]?