我认为的编辑器分成两类，一种是分为左右两边实现即时渲染；一种是先写语法，然后通过按钮实现渲染。 其实即时渲染也不难，共同需要考虑的问题就是xss，因为渲染库能自定义第三方的xss过滤（之前是通过设置来实现，也就是本身自带，不过在某个版本后被取消了），所以xss就用官方推荐的dompurify。即时渲染可以通过编辑器本身api实现文本变动监听来实现，还有一个需要考虑的问题就是代码与渲染区域的对应。但因为这与我的需求相悖，在这里就不介绍了，相信小老板们都能轻松实现 统一惯例，我们来看看效果图 上面的工具栏其实就是添加事件然后往光标插入对应的语句而已，emoji暂时没有实现，貌似需要第三方库支持。 整体来说并没有难点，只不过对于这些东西来说，要么是文档分散讲得不清楚，要么就是找不到什么文档。要是真没有文档的话，或者官方简陋的文档，你可能真的想问候一下他，哈哈哈。这个时候一个能用的代码就显得尤为重要，尽管它可能没什么注释，但相信聪明的你肯定能理解其中的意思。话不多说，上代码吧~ 这次的代码同样需要在引用时绑定value，也就是编辑框里的内容 哦，对了，忘记讲一些东西了。关于代码块高亮以及latex渲染的问题。 高亮使用的是highlight.js，marked是支持这个库的，直接使用就行，它能自动识别语言，要是不想调用那个函数，你也可以自行判断用户会使用到的语言。主题的使用，需要引用包下style对应的css。还有一个最重要的就是渲染的标签必须要有class为hljs的属性，不然你只能看到代码是高亮的。至于class属性怎么添加，如果你没有letax需求，那么只需要在渲染的时候套一层标签，它的class属性是这个即可。 剩下的就是latex了，因为marked本身是不支持latex的，但是它支持重写render函数，通过这一方法来实现对latex的支持，在这里我使用的是katex，感兴趣的小老板可以试试mathjax。不过有一个不太好的地方就是数学公式需要被代码块包住，即$a * b$。不过这都不是大问题，能好好渲染才是王道。 好了，本次的分享就到此为止吧，see you again~ 到此这篇关于基于Ace的Markdown编辑器的文章就介绍到这了,更多相关Ace Markdown编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！