解决Editor.md通过代码块原样输出Emoji被强制解析问题

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Editor.md是一款优秀的开源Markdown 编辑器,在使用中遇到的一些问题和功能改进分享给需要的伙伴。 项目地址 https://github.com/pandao/editor.md 问题 在Editor.md中,如果要输出表情,我们只需要通过代码 :smiley: 就可以输出 。

Editor.md是一款优秀的开源Markdown 编辑器,在使用中遇到的一些问题和功能改进分享给需要的伙伴。
项目地址 img_7f969f62ee272a3be19966806fff4ad5.pnghttps://github.com/pandao/editor.md

问题

Editor.md中,如果要输出表情,我们只需要通过代码 :smiley: 就可以输出 img_09e2457de698afee11f53ef04d185587.png

如果我们通过代码块形式原样输出:smiley:,就会被强制解析成 img_09e2457de698afee11f53ef04d185587.png

,这明显不是我们想要的。

通过查看editormd.js源码,可以看到emoji这块的解析正则是这样写的:

editormd.regexs = {
    emoji  : /:([\w\+-]+):/g
}

这样问题就来了,意思就是页面所有被 : :包含的元素都会被解析成 emoji 符号。

解决办法

1丶 第一步

editormd.js中搜索editormd.regexs,修改emoji如下:

editormd.regexs = {
    emoji  : /(?!(<code>).):([\w\+-]+):(?!(<\/code>))/g
}

2丶 第二步

editormd.js中搜索text = text.replace(new RegExp(matchs[i]),大概在3434行。

 text = text.replace(new RegExp(matchs[i]), function($1, $2){

修改为

text = text.replace(emojiReg, function($1, $2){

这样就可以实现在编辑器里面原样输出代码块语法了,其他标签强制解析解决方法和这类似。

由于Editor.md项目目前停止维护了,大家可以看我提交的 img_7f969f62ee272a3be19966806fff4ad5.pngPR

原文地址:代码汇个人博客 http://www.codehui.net/info/15.html


目录
相关文章
|
6月前
|
Java 数据库连接
Java中的静态代码块深入解析
Java中的静态代码块深入解析
123 0
|
27天前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
60 0
|
27天前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
49 0
|
27天前
|
存储 Java C++
Collection-PriorityQueue源码解析
Collection-PriorityQueue源码解析
58 0
|
27天前
|
安全 Java 程序员
Collection-Stack&Queue源码解析
Collection-Stack&Queue源码解析
72 0
|
7天前
|
消息中间件 缓存 安全
Future与FutureTask源码解析,接口阻塞问题及解决方案
【11月更文挑战第5天】在Java开发中,多线程编程是提高系统并发性能和资源利用率的重要手段。然而,多线程编程也带来了诸如线程安全、死锁、接口阻塞等一系列复杂问题。本文将深度剖析多线程优化技巧、Future与FutureTask的源码、接口阻塞问题及解决方案,并通过具体业务场景和Java代码示例进行实战演示。
26 3
|
24天前
|
存储
让星星⭐月亮告诉你,HashMap的put方法源码解析及其中两种会触发扩容的场景(足够详尽,有问题欢迎指正~)
`HashMap`的`put`方法通过调用`putVal`实现,主要涉及两个场景下的扩容操作:1. 初始化时,链表数组的初始容量设为16,阈值设为12;2. 当存储的元素个数超过阈值时,链表数组的容量和阈值均翻倍。`putVal`方法处理键值对的插入,包括链表和红黑树的转换,确保高效的数据存取。
50 5
|
26天前
|
Java Spring
Spring底层架构源码解析(三)
Spring底层架构源码解析(三)
|
26天前
|
XML Java 数据格式
Spring底层架构源码解析(二)
Spring底层架构源码解析(二)
|
27天前
|
存储 Java API
从源码角度解析ArrayList.subList的几个坑!
从源码角度解析ArrayList.subList的几个坑!

推荐镜像

更多