emlog使用emoji表情

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的功能了,但是,发布完文章之后会发现标签是一个一行的显示的,查看HTMLcss发现,表情其实就是一个图片,而emlog或者所用的模板本身已经将img标签设置为block了,所以我们要让他变成行内元素,进行下面这一步就好了

直接给他添加行间样式就行

进行完这三步之后,就可以发表emoji表情啦~~ twemoji-1f60b

最最最重要的一步

测试发现,如果你只使用了一个emoji表情,或者你使用了多个连续的emoji表情,你会发现一个的会单独一行,多个的最后一个也会单独一行…这就有点难看了,就像下面的样子:

经过上面的被删除的那个步骤出现的情况

查看页面的代码发现,一个的时候和多个最后一个没有没循环加上那个样式…苦于博主是个JS小白,改不了那个代码了twemoji-1f60f,我们另辟蹊径去其他地方给他加上这个样式~~ 于是我发现了文章页面加载了一个JS文件:common_tpl.js,路径为/include/lib/js/common_tpl.js,这样就好办了twemoji-1f64c

/*更改emoji样式*/
$(function (){    $(".emoji").attr("style","display:inline;width:20px;");
})

加在末尾就好啦~~

加完代码之后,我们就可以去看页面啦

这样就不会出现表情独占一行的情况了

emoji表情测试

twemoji-1f600 twemoji-1f601 twemoji-1f61b twemoji-1f61c twemoji-1f61d

本博客所有文章如无特别注明均为原创。作者:止语复制或转载请以超链接形式注明转自 止语-编程学习分享
原文地址《emlog使用emoji表情

相关推荐

发表评论

路人甲

网友评论(0)