前言：
项目开发需要用到富文本编辑器，最终确定使用vue框架 vue-meditor 。
1、vue-meditor简介
一款使用marked和highlight.js开发的一款markdown编辑器，除常见markdown语法外，支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能
1.1、优点：
使用简单，安装npm包或者引入js包就行
方便扩展，定制型比较强
功能强大，总分3个版本，简单版、预览版、专业版
体积小，加载速度快，npm包删除了highlight.js和codemirror里的依赖
1.2、实现思路：
通过监听文本输入区域内内容的变化，实时将输入的markdown语法进行编译，并渲染到预览区域。
编辑器大致分为头部菜单栏、左侧内容输入区域、右侧预览区域三个部分。
头部菜单主要为定自定义标题区域和菜单按钮，菜单按钮可通过配置文件进行显示和隐藏；左侧编辑区域，简单版使用textarea开发，满足基本需求，
专业版使用codemirror开发，编辑区域支持手动输入文本和通过头部菜单插入；右侧预览区域可实时预览输入文本，并可通过菜单按钮，进行编辑区域和预览区域的切换
1.3详细文档：
github项目地址：GitHub - zhaoxuhui1122/vue-markdown: 一款使用marked和highlight.js开发的一款markdown编辑器
github文档地址：介绍 | vue-markdown
2、安装使用
2.1、使用npm方式引入
1、npm安装
vue项目中，确保npm,node版本没有问题，直接用npm安装,
npm install vue-meditor --save
2、项目中使用
注意，count初始化赋值的时候，如果是后台传输数据，一定坐下异常处理。否则如果count为null，组件会报错。
//简单版 import Markdown from 'vue-meditor' export default { name: 'markdownTest', data: { count: '测试预览' }, components: { Markdown } } //html <MarkdownPro v-model="count" :height="400" @on-paste-image="onPasteImage" @on-ready="onReady" @on-copy="onCopy" @on-save="onSave" theme="light" /> //专业版 import { MarkdownPro } from 'vue-meditor export default { name: 'markdownTest', data: { count: '测试预览' }, components: { MarkdownPro }, methods: { onReady (data) { console.log(data) }, onCopy (text) { console.log(text) }, onPasteImage (file) { console.log(file) }, onSave (data) { console.log(data) }, } } //html <MarkdownPro v-model="count" :height="400" @on-paste-image="onPasteImage" @on-ready="onReady" @on-copy="onCopy" @on-save="onSave" theme="light" /> //预览版 import { MarkdownPreview } from 'vue-meditor' export default { name: 'markdownTest', data: { count: '测试预览' }, components: { MarkdownPreview } } //html <MarkdownPro v-model="count" :height="400" theme="light" />
2.2、js安装包引用
1、下载github代码
git clone https://github.com/zhaoxuhui1122/vue-markdown.git
2、复制文件
复制src文件夹下内容至components文件夹下
//简单版 import Markdown from '@/components/markdown/...'; //专业版 import MarkdownPro from '@/components/markdown/pro'; //预览组件 import MarkdownPreview from '@/components/markdown/preview';
最后看下效果图，左边是富文本编辑器，右边是设置了属性，预览功能，边写边预览
