vue + vditor (éditeur de démarquage)

Vditor est un éditeur Markdown côté navigateur qui prend en charge WYSIWYG, le rendu instantané (similaire à Typora) et le mode de prévisualisation en écran partagé. Il est implémenté dans TypeScript et prend en charge le JavaScript natif ainsi que des frameworks tels que Vue, React, Angular et Svelte.

Installation 1.vue2 (il est recommandé d'installer 3.7.7 et inférieur)

npm install [email protected]

 2. composant vditor

<template>
  <div id="vditor" />
</template>
<script>
import Vditor from "vditor"
import "vditor/dist/index.css"

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default () {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    isHideTools: {
      type: Boolean,
      required: false,
      default: false
    },
    isPin: {
      type: Boolean,
      required: false,
      default: true
    },
    height: {
      type: String,
      required: false,
      default: '300px'
    },
    width: {
      type: String,
      required: false,
      default: "auto"
    },
    mode: {
      type: String,
      required: false,
      default: 'sv'
    },
  },
 
  data () {
    return {
      vditor: ""
    }
  },
  //mounted
  mounted () {
    this.vditor = new Vditor("vditor", {
      height: this.height,
      width: this.width,
      toolbarConfig: {
        pin: this.isPin,
        hide: this.isHideTools,
      },
      cache: {
        enable: false
      },
      toolbar: [
        "emoji",
        "headings",
        "bold",
        "italic",
        "strike",
        "link",
        "|",
        "list",
        "ordered-list",
        "check",
        "outdent",
        "indent",
        "|",
        "quote",
        "line",
        "code",
        "inline-code",
        "insert-before",
        "insert-after",
        "|",
        //"upload",
        // "record",
        { //自定义上传
          hotkey: "",
          name: "upload",
          // tipPosition: "s",
          tip: "上传图片",
          className: "right",
        },
 
        "table",
        "|",
        "undo",
        "redo",
        "|",
        // "fullscreen",
        "edit-mode",
        {
          name: "more",
          toolbar: [
            //"both",
            "code-theme",
            "content-theme",
            "export",
            "outline",
            "preview",
            //"devtools",
            // "info",
            //"help",
          ],
        },
      ],
      after: () => {
        this.vditor.setValue(this.value)
      },
      mode: this.mode,
      preview: {
        mode: "both",
        actions: []
      },
      upload: {
        accept: 'image/*',// 规定上传的图片格式
        url: "/api/uploadFile",// 请求的接口
        multiple: false,
        fieldName: 'file',
        max: 10 * 1024 * 1024,//上传图片的大小
        // extraData: { 'access_token': this.token }, // 为 FormData 添加额外的参数
        linkToImgUrl: "/api/admin/uploadFile",
        validate (files) {
          const isLessthan10M = files[0].size / 1024 / 1024 < 10
          if (!isLessthan10M) {
            //this.$message.error('上传图片大小不能超过 10MB!')
          }
        },
        // 上传图片回显处理
        format (files, responseText) {
          var self = this;
          var data = JSON.parse(responseText)
          // 上传图片请求状态
          if (data.status) {
            let filName = data.msg
            let lastTipNum = filName.substr(filName.lastIndexOf('/', filName.lastIndexOf('/') - 1) + 1);
            let index = lastTipNum.lastIndexOf("\/");
            let succ = {}
            succ[filName] = "/api" + data.data
            //图片回显
            return JSON.stringify({
              data,
              data,
              data: {
                errFiles: [],
                succMap: succ
              }
            })
          } else {
            Message({
              message: "图片上传失败",
              type: 'error',
            })
          }
 
        },
        error (msg) {
          console.log(msg + "上传失败")
        },
      }
    })
    this.unwatch = this.$watch('value', (val) => {
       if (this.vditor  && this.getValue() !== val) {
            this.setValue(val)  
       }
    )
  },
  beforeDestory() {
    if (this.unwatch) {
        this.unwatch()
    }
    if (this.vditor) {
        this.vditor.destory()
    }
  },
  methods: {
    getValue () {
      return this.vditor.getValue();
    },
    getHTML () {
      return this.vditor.getHTML();
    },
    setValue (value) {
      return this.vditor.setValue(value);
    },
    disabled () {
      return this.vditor.disabled();
    },
  },
 
}
</script>

Note:

        1. Après l'initialisation du vditor monté, définissez la valeur de l'éditeur en surveillant la valeur

        2. opération de destruction beforeDestory()

3. Installez la dernière version de vue3

pnpm i vditor@next -S

4. Pour plus de configuration, reportez-vous au site officiel de vditor