markdown编辑器的实现

后台需要快速实现一个定制版的markdown编辑器,避免重复造无意义的轮子。

之前用的 ng2-quill-editor,WYSIWYG编辑器,不爽,很不爽。

还是markdown最亲切,无论可移植性,易用性,友好程度都太美好。

怎么实现?

简单说:

编辑器 + 解释器

解释器大把的,选了marked,10K+star,用户也多,插件机制成熟。

              
  • 1
  • 2
  • 3
var marked = require('marked'); console.log(marked('I am using __markdown__.')); // Outputs: <p>I am using <strong>markdown</strong>.</p>

编辑器,简单说一个<textarea></textarea>就够了,但我要美观,要能识别代码高亮,要能折叠,要能支持多种编程语言,不简单,只能找第三方了; 然而还真的没一个如意的,大部分的项目都是迎合自身需求产出的,缺乏太多定制型,不灵活,不了解别人代码,不易优化。

无奈造了个简单的,简单到除了上面我列出的几个功能之外啥功能都没有,挺好。

OK,全部代码在这

不详说,讲几个核心:

  • codemirror中使用"gmf"mode,而非"markdown"mode,GFM 是 Github 拓展的基于 Markdown 的一种纯文本的书写格式。
  • 需要啥语言就引入啥包,自己用的,不必在意体积,功能才是第一位
  • 要实现实时预览模式,简单说就是双向绑定,编辑器的数据流直接到marked解析输出
  • 要添加什么按钮功能,比如Link这样的,直接调codemirror的api,很丰富很强壮
  • 代码高亮和代码块折叠之一类功能,require进对应文件,codemirror配置好就ok了

效果如下:

https://raw.githubusercontent.com/surmon-china/angular-admin/master/screenshot/markdown.png

本文于 2017/2/15 上午 发布在 Code 分类下,当前已被围观 779 次

相关标签:MarkdownAngularJavascript

永久地址:https://surmon.me/article/5

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN