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项目地址：https://github.com/zhaoxuhui1122/vue-markdown

github文档地址：https://zhaoxuhui1122.github.io/vue-markdown-docs/

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';

最后看下效果图，左边是富文本编辑器，右边是设置了属性，预览功能，边写边预览

西洲 -

发布了69 篇原创文章 · 获赞 25 · 访问量 10万+

私信关注

vue使用markdown