vue2 使用 markdown插件 v-md-editor

Mr.Meng_95

已于 2022-07-24 10:35:27 修改

阅读量7.7k

点赞数 5

分类专栏： node.js 文章标签： node.js 前端 mysql

于 2022-07-24 10:35:07 首次发布

本文链接：https://blog.csdn.net/qq_30351747/article/details/125956459

版权

node.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在Vue2项目中使用v-md-editor插件，实现Markdown编辑器的功能，包括编辑时的实时预览、代码高亮、文件上传以及编辑内容的回显。详细步骤包括npm安装、全局引入、组件封装和使用，以及解决编辑内容无法回显的问题。同时，还提供了预览组件的使用方法，强调了数据在数据库中需要以HTML格式存储，并给出了Markdown与HTML相互转换的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2 使用 markdown插件 v-md-editor

v-md-editor官网

效果

编辑时

在这里插入图片描述

发布后预览

在这里插入图片描述

配置

1、npm安装插件

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

2、main.js 全局引入插件

/* v-md-editor 编辑器 start  */
/* 1、v-md-editor 基础引用  */
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,
});

/* 2、v-md-editor 代码块关键字高亮  */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有语言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs,
});
Vue.use(VueMarkdownEditor);

/* 3、v-md-editor 二次封装  */
import mdEditor from '@/components/v-md-editor/index';
Vue.component('MdEditor', mdEditor);
/* v-md-editor 编辑器 end  */

3、二次封装插件

1、二次封装
2、main.js 全局引入( 第二部已加入)

在 components 目录下创建 v-md-editor 文件夹并创建文件 index.vue

在这里插入图片描述

index.vue 代码如下

<template>
  <div>
    <v-md-editor 
    v-model="editorValue"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="calc(100vh - 150px)"></v-md-editor>
  </div>
</template>

<script>
  export default {
    name: 'mdEditor',
    data() {
        return {
            editorValue: this.content != null ? this.content : "",
        }
    },
    props: {
        // 接收值父组件传递值
        content: String
    },
    methods: {
      // v-md-editor 文件上传
      handleUploadImage(event, insertImage, files) {
        // console.log(files);
        // 上传
        for (let i = 0; i < files.length; i++) {
          this.crud.upload(files[i], "image/vMdEditor/").then(res => {
            // 获取返回数据
            let data = res.data.data;
            // 添加图片到内容
            insertImage({
              url: data.url,
              desc: data.name
            });
          });
        }
      },
    },
    watch: {
      editorValue: function (newNum, oldNum) {
        // 修改调用者传入的值
        this.$emit('update:content', newNum)
      }
    },
  }
</script>

<style>
</style>

4、使用

在任意地方使用

 <MdEditor :content.sync="obj.content"></MdEditor>

在这里插入图片描述

5、关于编辑无法回显

初始化 MdEditor 编辑器过早, 可能导致数据无法正常回显
通过 v-if 控制 MdEditor 加载时间 (如下：在调用接口获取数据完成之后修改 initSuccess = true)

以上代码参考的这位朋友，有些地方我做出来修改。

vue2 使用 markdown插件 v-md-editor

以上代码功能，左边markdown右边预览。纯预览功能如下：

1、预览组件

<!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body -->
<v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>

data() {
  return {
    html: '',
  };
},

2、全局配置main.js添加如下代码：

import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/preview-html.css';

// 引入使用主题的样式
// import '@kangc/v-md-editor/lib/theme/style/vuepress';

Vue.use(VMdPreviewHtml);

注意

组件渲染的是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;