续前面:解决了editormd不能正常显示emoji问题

昨天发文,发现直接通过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=\"&#58;"+name+"&#58;\" alt=\"&#58;"+name+"&#58;\" />";
     });
 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=\"&#58;"+name+"&#58;\" alt=\"&#58;"+name+"&#58;\" />";});
 return temp;

看看成果

在这里插入图片描述

在这里插入图片描述

体会

对前端编程,特别是ajax、js不熟悉,中间调试方法,函数使用遇到很多坑,终于解决了。
中间还遇到的坑:
火狐浏览器会缓存js文件,修改半天,发现没有被修改。
@login_required()修饰符增加后,预览html系统会自动增加登录参数

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值