个人博客项目（spring+vue）整合富文本编辑器（markdown）

1、描述

之前写了一个用SpringBoot+Vue的个人博客，用若依框架做了后台开发。但是博客数据是纯文本，这次在之前纯文本的基础上，将发布文章功能、文章正文回显功能变为富文本显示。

2、核心目标

     2.1、在Vue项目（管理端）中整合v-md-editor插件， 能够保存富文本数据

     2.2、在展示端，能够回显富文本数据。

3、有用的借鉴文章：

https://www.cnblogs.com/wjw1014/p/11778159.html

在 Vue3 中使用 markdown 编辑器组件 - 掘金

介绍 | v-md-editor

4、前提

因为我对富文本的要求是有文本+图片，因此你需要自己有一个上传图片的接口。

接口要求：上传图片，返回图片可访问的地址。

SpringBoot结合阿里云OSS实现图片或文件接口-CSDN博客

5、实现

由于我的管理端为vue2,展示端为vue3。因此以下只列举一种版本的配置方法，详细可查看官方文档。

5.1发布文章实现富文本

步骤:

5.1.1安装v-md-editor（具体可看官方手册中Vue2还是Vue3的,这里是vue2）

 npm install mavon-editor --save

5.1.2在Vue项目的main.js中进行组件注册

// mavonEditor全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

//markdown
Vue.use(mavonEditor)

5.1.3在vue页面中使用

在需要使用的位置上使用<mavon-editor>，其中v-model绑定的是富文本数据，@imgAdd绑定的是图片添加的处理方法。

  <mavon-editor ref=md  v-model="formData.content" @imgAdd="$imgAdd" @imgDel="$imgDel"/>

 在使用标签的页面的js中（vue页面的method区）,其中的url要换成你上传图片的接口，url.data值的是你返回的图片地址（要根据你实际的修改）。

同时，在后端接受参数的时候，这里的图片参数在image变量中。在对应的java后台，接受的变量名应该一致或者指定，否者接受不到图片。

$imgDel(){},
     // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'http://localhost:8081/',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
              console.log("url是")
              console.log(url)
               this.$refs.md.$img2Url(pos, url.data);
           })
      

5.2文章正文实现富文本回显

5.2.1安装v-md-editor（具体可看官方手册中Vue2还是Vue3的，这里是vue3）

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

5.2.2在Vue项目的main.js中进行组件注册

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,
});

app.use(VueMarkdownEditor);

5.2.3在vue页面中使用

这里v-model是绑定的保存的富文本数据，mode="preview"的作用是只展示富文本数据，而不用编辑。

   <v-md-editor v-model="articleDetail.article_detail"  mode="preview"></v-md-editor>

6、结果：

管理端（发布文章）实现之前：

管理端（发布文章）实现之后：

展示端实现之前：

展示端实现之后: