Vue使用markdown编辑器

Vue使用markdown编辑器

1.安装

npm install mavon-editor -S

2.main.js全局注册

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

3.vue页面使用

        <el-form-item label="文章内容">
          <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>

      imgAdd(pos, $file) {
      let $vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append('file', $file);
      axios({
        url: 'http://127.0.0.1:9090/files/editor/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 在Markdown文本中插入图片
        var url = res.data.data[0].url
        // console.log(url)
        // const markdownText = `http://127.0.0.1:9090/files/1705996022610-头像.jpg`;
        $vm.$img2Url(pos, url);
      })
    },

4.文章预览

            <mavon-editor
                class="md"
                :value="content"
                :subfield="false"
                :defaultOpen="'preview'"
                :toolbarsFlag="false"
                :editable="false"
                :scrollStyle="true"
                :ishljs="true"
            />