MakeDown格式的处理(vue前端编辑与展示，微信小程序展示，SpringBoot后端获取摘要)

Vue端处理

组件官网

http://www.mavoneditor.com

安装依赖

npm install mavon-editor --save

main.js添加引用

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

编辑页面使用

template
      <mavon-editor ref="md"
        :toolbars="markdownOption"
        v-model="form.content"
        @save="save"
        @imgAdd="imgAdd"
        :ishljs = "true"
      />
data 
markdownOption: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        }
method
      //图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
      imgAdd(filename,imgfile){
        // 第一步.将图片上传到服务器.
        upload(imgfile).then(({data})=>{
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          this.$refs.md.$img2Url(filename, data.url);
        })
      }

展示页面使用

    <mavon-editor v-if="show" style="margin: 10px 0;"
      v-model="form.answer"
      defaultOpen = "preview"
      :toolbarsFlag = "false"
      :subfield = "false"
    />

SpringBoot后端处理

获取摘要