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

亦凉 2022-02-14 16:55 329阅读 0赞

> Editor.md是一款优秀的开源Markdown 编辑器，在使用中遇到的一些问题和功能改进分享给需要的伙伴。  
> 项目地址 ![img\_7f969f62ee272a3be19966806fff4ad5.png][img_7f969f62ee272a3be19966806fff4ad5.png][/images/20220214/5130bab982a14c2599d8d1d6e4918758.png][https_github.com_pandao_editor.md]

### **问题** ###

在`Editor.md`中，如果要输出表情，我们只需要通过代码 `:smiley:` 就可以输出 ![img\_09e2457de698afee11f53ef04d185587.png][img_09e2457de698afee11f53ef04d185587.png]。

如果我们通过代码块形式原样输出`:smiley:`,就会被强制解析成 ![img\_09e2457de698afee11f53ef04d185587.png][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.png][img_7f969f62ee272a3be19966806fff4ad5.png][PR][]

> 原文地址：代码汇个人博客 [http://www.codehui.net/info/15.html][http_www.codehui.net_info_15.html]

--------------------

[img_7f969f62ee272a3be19966806fff4ad5.png]: https://yqfile.alicdn.com/img_7f969f62ee272a3be19966806fff4ad5.png
[https_github.com_pandao_editor.md]: /images/20220214/5130bab982a14c2599d8d1d6e4918758.png
[img_09e2457de698afee11f53ef04d185587.png]: /images/20220214/879b0bb8191b496786ad64710af4a844.png
[PR]: https://github.com/canvaslh/editor.md/commit/3a2c506a40611b27054e02d448f8b446876a935a
[http_www.codehui.net_info_15.html]: http://www.codehui.net/info/15.html