vue2 使用 markdown插件 v-md-editor

最新推荐文章于 2025-03-07 17:03:07 发布

原创最新推荐文章于 2025-03-07 17:03:07 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了如何在Vue2项目中使用v-md-editor Markdown插件。包括安装、在main.js中的引用及具体使用方法。同时强调了组件渲染Markdown数据时，存储需转化为HTML，并提供了数据转换的方法，如使用turndown库进行HTML到Markdown的转换。

参考文献

vue2 使用 markdown插件 v-md-editor_@kangc/v-md-editor_Mr.Meng_95的博客-优快云博客

轻量版编辑器v-md-editor 编辑器

1、安装

# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor

2、引用，可用于main.js 中

import Vue from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.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';

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

Vue.use(VMdPreview);

3、使用

<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

注意
组件渲染的是markdown格式的数据，存数据库要存html结构的数据，这个需要做转化。

将html的数据转为markdown的数据格式

1、安装turndown

npm install turndown

2、转换js代码

const TurndownService = require("turndown").default;
var turndownService = new TurndownService();


// this.html为数据库保存的html格式，转换成了markdown格式
var markdown = turndownService.turndown(this.html);
this.content = markdown;

将markdown的数据转为html的数据格式：

import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';

// 调用方法将 markdown 转换成 html 并使用 xss 过滤
const html = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(markdown));
this.html = html;