昨天发文,发现直接通过pip 下载的markdown-editor编辑器(editormd.js @version v1.5.0)
不能使用emoji。经过调试是web-fx网站不支持链接emoji资源,所以需要重新找到了新的链接资源。
后来我在git-hub上发现有emoji服务可以使用,但是服务调用方式与原来的editormd上不一样。
原资源使用路径:https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/
新资源使用路径:https://github.githubassets.com/images/icons/emoji/
准备资料
下载git_emojis.json文件,里面都是每一个emoji的图片链接,图片是png格式。放到下面这个目录/static/editormd/plugins/dialog/
开始修改代码
开始修改代码。主要修改editormd.js文件,增加以下代码,代替原来通过路径直接连接得到服务的代码。新代码通过读取git_emojis.json里面的服务连接,增加形成图片显示的属性应该就可以显示。
var temp; //定义变量
$.getJSON("\\static\\editor\\plugins\\emoji-dialog\\git_emojis.json?temp="+ Math.random(), function (data) //读取git-hub上的json路径文件
{
return temp= "<img src=\"" +data[name]+"\""+" class=\"emoji\" title=\":"+name+":\" alt=\":"+name+":\" />";
});
return temp;
解决问题
哈哈哈,没有那么简单,上面代码改好后,程序依然不能运行正常。通过看其他人帮助发现是ajax默认采用异步方式处理数据,这样数据还没下载到data里面,return就起到作用,数据每次返回都是没有定义。同样方法修改emoji-dialog.js。
$.ajaxSetup({async:false}); //新增加这一句就OK
$.getJSON("\\static\\editor\\plugins\\emoji-dialog\\git_emojis.json?temp="+ Math.random(), function (data) {
return temp= "<img src=\"" +data[name]+"\""+" class=\"emoji\" title=\":"+name+":\" alt=\":"+name+":\" />";});
return temp;
看看成果
体会
对前端编程,特别是ajax、js不熟悉,中间调试方法,函数使用遇到很多坑,终于解决了。
中间还遇到的坑:
火狐浏览器会缓存js文件,修改半天,发现没有被修改。
@login_required()修饰符增加后,预览html系统会自动增加登录参数