Vue使用markdown编辑器

最新推荐文章于 2024-06-15 23:48:28 发布

迟意..

最新推荐文章于 2024-06-15 23:48:28 发布

阅读量825

点赞数 6

分类专栏： springboot+vue框架开发文章标签： vue.js 编辑器前端

本文链接：https://blog.csdn.net/weixin_45730605/article/details/135776378

版权

springboot+vue框架开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用MavonEditor组件，包括全局安装、Vue页面内的使用方法（如图片上传功能），以及文章预览功能的配置。

摘要由CSDN通过智能技术生成

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"
            />