vue3的markdown编辑器v-md-editor

vue3的markdown编辑器v-md-editor

一、介绍

官网：http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件，分为轻量版和进阶版，这里只演示进阶版

二、快速开始

2.1 安装

# 使用 npm
cnpm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next

在vue3中注册

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

这里的Prism可能会报错，解决办法如下：

cnpm install prismjs -S

cnpm install vite-plugin-prismjs -D

在 vite.config.js 里配置

import { defineConfig } from 'vite'
import { prismjsPlugin } from 'vite-plugin-prismjs'

export default defineConfig({
	plugins: {
		prismjsPlugin({
			// ['json', 'css'] 按需引入，'all' 所有语言
			languages: 'all',
			// 配置行号插件
			plugins: ['line-numbers'],
			// 主题名
			theme: 'coy',
			css: true
		})
	}
})

2.2 主题

2.2.1 github主题

markdown 解析使用markdown-it来实现，代码块解析使用 highlight.js来实现。

highlight依赖
## 这个是highlight.js基础依赖
npm install --save highlight.js
## 安装支持vue3 的@highlightjs/vue-plugin 依赖
npm install --save @highlightjs/vue-plugin

扩展 markdown-it

引入代码高亮语言包

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs 核心代码
import hljs from 'highlight.js/lib/core';
// 按需引入语言包
import json from 'highlight.js/lib/languages/json';

hljs.registerLanguage('json', json);

VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs,
});


//上边代码注意点
//这个VueMarkdownEditor在之前安装的时候配过以下代码：将上边的新配置把下边配置覆盖掉，必须要覆盖掉
//VueMarkdownEditor.use(vuepressTheme, {
  //Prism,
//});

2.2.2 vuepress 主题(推荐)

扩展 markdown-it

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
  extend(md) {
    // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
    // md.set(option).use(plugin);
  },
});

vite中扩展代码高亮语言包

# npm
cnpm install vite-plugin-prismjs

按需引入语言包（推荐）

如果前文中配置过prismjsPlugin，这个可以不配置

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjs({
      languages: ['json'],
    }),
  ],
});

2.2.3 代码行号显示

import VueMarkdownEditor from '@kangc/v-md-editor';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';

VueMarkdownEditor.use(createLineNumbertPlugin());//这一行另起一行粘贴就行，不要覆盖之前的

2.3 插入提示

引入

vuepress 主题已内置此插件,不需要在引入

import VueMarkdownEditor from '@kangc/v-md-editor';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';
import '@kangc/v-md-editor/lib/plugins/tip/tip.css';

VueMarkdownEditor.use(createTipPlugin());

在组件中使用

 <v-md-editor v-model="text"
  left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | tip "
  height="400px"></v-md-editor>

主要是left-toolbar属性 undo redo clear h bold italic strikethrough quote ul ol table hr link image code save 这些必须要写，这是默认的

2.4 插入emoji表情

引入

import VueMarkdownEditor from '@kangc/v-md-editor';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';

VueMarkdownEditor.use(createEmojiPlugin());

组件中使用

 <v-md-editor v-model="text"
  left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | tip  emoji"
  height="400px"></v-md-editor>

主要是left-toolbar属性 undo redo clear h bold italic strikethrough quote ul ol table hr link image code save 这些必须要写，这是默认的
主要就是在left-toolbar后边加了个emoji

2.5 快捷代码复制

引入即可

import VueMarkdownEditor from '@kangc/v-md-editor';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

VueMarkdownEditor.use(createCopyCodePlugin());

2.6 图片上传

原理：上传图片至文件服务器，上传成功后将返回的图片相关信息插入编辑区域。

上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。

<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | image"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="500px"
  />
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files);

      // 此处只做示例
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
      });
    },
  },
};
</script>

2.7 事件和方法

change

• 回调参数：(text, html)

内容变化时触发的事件。text 为输入的内容，html 为解析之后的 html 字符串。

blur

• 回调参数：(event)

编辑器失去焦点时触发。

save

• 回调参数：(text, html)

点击 save toolbar 时触发的事件。

image-click

• 回调参数：(images, currentIndex)

点击图片时触发的事件。

fullscreen-change

• 回调参数：(isFullscreen)

切换全屏状态时触发的事件。

upload-image

• 回调参数：(event, insertImage)

toolbar 中使用上传图片之后，用户触发图片上传动作时会触发该事件（例如：选择图片上传，拖拽图片到编辑器中，截图后粘贴到编辑器中）。

30 解析markdown

1) 使用markdown-it

官网：https://markdown-it.docschina.org/#%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B

安装markdown-it插件

npm install markdown-it --save

在需要解析Markdown文档的Vue组件中引入markdown-it插件

import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();


//解析markdown文本为html
var md = require('markdown-it')();
var result = md.render('要解析的markdown文本');//这里的result就是解析后的html文本


//解析示例：
<template>
  <div v-html="md.render(markdown)"></div>
</template>
<script>
import MarkdownIt from 'markdown-it';
export default {
  data() {
    return {
      markdown: '# Hello, world!\nThis is **Markdown**.',
      md: new MarkdownIt()
    }
  }
}
</script>

1.1 代码高亮

highlight依赖
## 这个是highlight.js基础依赖
npm install --save highlight.js
## 安装支持vue3 的@highlightjs/vue-plugin 依赖
npm install --save @highlightjs/vue-plugin

//在组件中：
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' //样式

const md = new MarkdownIt({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }

      return ''; // 使用额外的默认转义
    }
  });
let result= md.render("markdown文本");//这样输出的就是高亮的了

2）使用v-md-editor的预览组件（推荐）

这里为什么不使用v-md-preview这个预览组件，主要是因为这个组件太丑

直接在组件中使用即可，text为要解析的markdown文本
<v-md-editor  :model-value="text" mode="preview"></v-md-editor>

有可能也需要引入markdown-it插件才能用

npm install markdown-it --save