前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Markdown库研究 && 前端MD模块推荐 -- Mavon-Editor

Markdown库研究 && 前端MD模块推荐 -- Mavon-Editor

原创
作者头像
HaythamXu
修改2020-01-06 11:09:52
2.7K0
修改2020-01-06 11:09:52
举报
文章被收录于专栏:Haytham的原创技术文章

指路牌

  • Markdown库研究
  • 前端解析markdown
  • 前端markdown编辑器

适用场景

  • 前端markdown编辑器
  • 前端markdown解析器

参考博客

正文

很早以前就想自己搭建一个博客系统,本以为最麻烦的应该是用户管理,后来发现最麻烦的居然是文本编辑器...我自己是不太喜欢富文本编辑器的,平时都是印象笔记写文章,md用的很习惯,就想要寻找一个前端解析md的库,结果这个坑是真的有点深...

首先markdown的本质是将md的标记语法转换成前端代码,而这个转换过程可以分为前端完成与后端完成两个大方向,我个人觉得渲染工作应该放在前端完成,这样一方面可以减轻后台的压力,充分利用起客户端的性能。(个人觉得客户端的性能是非常过剩的),另一方面,前端语言相对比较统一,便于维护与发展,相比之下,虽然后台工在业中JAVA是龙头,但不可否认还有php庞大的用户群体,和我这种喜欢小语种开发后台的。

从结果上来讲,我看到的md库非常的不统一,我看到的有:marked、markdown-js、vue-md-loader、js-markdown-loader、parsedown、Ciconia、decoda、showdown、md-page等,这里面既有前端解析库,也有后台解析库,我没有时间能去研究和对比每一个库,大部分是通过体验别人开发的demo来体验每个库的功能,首先我pass掉了所有的后端库(其实也看了一个Python的库,使用的非常不愉快),而是将精力放在了前端库,我常用的MD标签有:标题、图片、备注、代码块、无序序列,有序序列、链接、表格。结果上讲大部分没有符合我的预期,主要是对代码块于备注的支持不是很好,这是我无法接受的。

最后的结论是没有找到一个非常方面,能开箱即用功能比较完善的库,这一度让我blog系统开发陷入了无法推进的地步,原本计划把其他事情都延后,想先解决MD编辑器的问题,然后我就碰到了救星 -- Mavon-Editor

Mavon-Editor

Github -- Mavon-Editor

如果当初我选择学习Vue是因为Vue的风格,因为Vue的logo,因为尤雨溪,那现在最大的原因就是因为Mavon-Editor了

需要说明的是,Mavon-Editor是一个基于Vue的库,并不适用于其他框架(?),它提供了非常丰富的功能,开箱即用,既可以用于编辑,也可以用于解析,也是因为这个库,大大加速了我个人blog系统的开发进度。首先来看几张效果图

解析

mavonEditor_01.png
mavonEditor_01.png

编辑

mavonEditor_02.png
mavonEditor_02.png

轻易的拓展 -- emoji

mavonEditor_03.png
mavonEditor_03.png

Mavon-Editor 非常丰富的基本功能,包括:标题、斜体、粗体、下划线、中划线、标记、上角标、下角标、居左居中具右、引用、有序序列、无序序列、连接、图片、代码、表格、标题导航、全屏编辑模式、全凭阅读模式、单栏模式、查看html文本等...

同时提供多种API,能够自定义功能栏的功能模块,基本样式,以及事件监听如:监控文本变动、模式切换变动等,详细可以参见文档。

使用也非常方便:

  • 安装npm install mavon-editor --save
  • 全局引入 // main.js import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor)
  • 使用(默认是编辑器模式)<mavon-editor v-model="value"/>
  • 阅读模式 <mavon-editor :value="input" :subfield = "false" :defaultOpen = "'preview'" :toolbarsFlag = "false" :boxShadow="false" :transition="false"</mavon-editor>

Mavon-Editor功能丰富、拓展方便,渲染效果也非常可观,整体体验并不亚于简书或印象笔记的书写体验。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 指路牌
  • 适用场景
  • 参考博客
  • 正文
  • Mavon-Editor
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档