mavon-editor的使用 图片上传 标签转译

目录

概述

Install Mavon-editor 安装

Use(如何引入)

重点在这里

概述

mavon-editor是一款基于vue的markdown编辑器，比较适合博客系统。由于官网对于一些细节的说明不够详细，这里对这里对该编辑器的使用做一个总结。

Install Mavon-editor 安装

通过如下命令安装：

npm install mavon-editor --save

Use(如何引入)

main.js

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

组件中引用 editor.vue

<template> 
  <div id="editor">
    <mavon-editor
       :codeStyle="codeStyle"
       v-model="content" 
       :subfield = "subfield"
       :ishljs="true"
       :externalLink="externalLink"
       ref=md
       @imgAdd="$imgAdd"
       @imgDel="$imgDel"
       @change="changeModel"
       :stripIgnoreTag= "false"
       :xssOptions="xssOptions"
     ></mavon-editor>
   </div>
</template>
import axios from 'axios'
export default {
  data() {
    return {
      html_content:undefined,
      md_content:undefined,
      content: '',
      toolbars: {
        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, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      codeStyle:'',//主题
      //参数
      subfield: true,
      externalLink: {
        markdown_css: function() {
            // 这是你的markdown css文件路径
            return '/markdown/github-markdown.min.css';
        },
        hljs_js: function() {
            // 这是你的hljs文件路径
            return '/highlightjs/highlight.min.js';
        },
        hljs_css: function(css) {
            // 这是你的代码高亮配色文件路径
            return '/highlightjs/styles/' + css + '.min.css';
        },
        hljs_lang: function(lang) {
            // 这是你的代码高亮语言解析路径
            return '/highlightjs/languages/' + lang + '.min.js';
        },
        katex_css: function() {
            // 这是你的katex配色方案路径路径
            return '/katex/katex.min.css';
        },
        katex_js: function() {
            // 这是你的katex.js路径
            return '/katex/katex.min.js';
        },
      },
      xssOptions: {
        whiteList: {
          img: ['src']
        },
      },
    };
},
mounted(){
   let that = this;
       that.codeStyle = "darcula";
},
methods: { 
    changeModel(value, render){
      // render 为 markdown 解析后的结果
      this.md_content = value
      this.html_content = render;
    },
    async $imgAdd(filename, file) {
      var formData = new FormData();
      formData.append("upload", file);
      // formData.append("typeKey", "article_app");
      formData.append("withCredentials", true);
      formData.append("emulateJSON", true);
      let that = this;
      await axios.post(
        "http://192.168.1.164:8000/api/picUpload/",
        formData,
        { "Content-Type": "multipart/form-data" }
      ).then(
      function(response) {
        if (response.status==200) {
          file.miniurl = response.data.url;
          that.$refs.md.$img2Url(filename, response.data.url);
        } else {
          that.$message.error('图片上传失败！')
        }
      },
      function(response) {
        this.$message.warning("抱歉!图片上传失败!请来联系管理员");
      });
    },
    $imgDel(pos) {
        delete this.img_file[pos];
    }
}

图片上传可参考官网

重点在这里

:stripIgnoreTag= "false"
:xssOptions="xssOptions"

这两个属性，支持在markdown中，如果输入<p></p>  <div></div>  <span></span>就会被解析掉不显示，加上这两属性可以让标签进行转译。具体见官网，找到xssOptions属性，查看相关链接。

由于自己亲身经历，所以挥泪下此片，希望对大家有所帮助！