emlog自带的文章编辑器确实不好用,于是在网上找到了一个以markdown格式来编辑文章的插件,挺好用的,但是这个编辑器本身是不支持emoji表情的插入的,当时问了插件的作者,说是emlog不支持emoji表情,之后也就没放在心上了,最近编辑文章突然想改一下,使得编辑器可以使用这些emoji表情,毕竟这些表情很Q~~~
markdown编辑器
本博客使用的markdown编辑器
文件及路径
/content/plugins/emlog_markdown/scripts/editormd.min.js
修改步骤
打开上述文件,跳转到图片显示的这一行
原文件为:
emoji : false;
将原文件改为图片的,即将
false
改为true
然后跳转到下图标记处:
if(!this.setting.emoji)
将原文件改为图片的,即去掉
!
这两步修改完成其实已经可以打开emoji的功能了,但是,发布完文章之后会发现标签是一个一行的显示的,查看HTML及css发现,表情其实就是一个图片,而emlog或者所用的模板本身已经将img
标签设置为block了,所以我们要让他变成行内元素,进行下面这一步就好了
直接给他添加行间样式就行
进行完这三步之后,就可以发表emoji表情啦~~
最最最重要的一步
测试发现,如果你只使用了一个emoji表情,或者你使用了多个连续的emoji表情,你会发现一个的会单独一行,多个的最后一个也会单独一行…这就有点难看了,就像下面的样子:
经过上面的被删除的那个步骤出现的情况
查看页面的代码发现,一个的时候和多个最后一个没有没循环加上那个样式…苦于博主是个JS小白,改不了那个代码了,我们另辟蹊径去其他地方给他加上这个样式~~ 于是我发现了文章页面加载了一个JS文件:common_tpl.js,路径为/include/lib/js/common_tpl.js
,这样就好办了
/*更改emoji样式*/ $(function (){ $(".emoji").attr("style","display:inline;width:20px;"); })
加在末尾就好啦~~
这样就不会出现表情独占一行的情况了
emoji表情测试