vue + ElementUI配合使用富文本编辑器 —— mavon-editor篇

简介

mavon-editor基于vue的markdown编辑器，比较适合博客系统 ,相对比较简洁，功能相对单一。插入的图片无法直接更改大小，创建表格很麻烦，但基本的markdown样式还是有的

开启mavon-editor之旅

安装mavon-editor

cnpm install mavon-editor --save

在main.js中全局注册

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

页面中使用该组件

<mavon-editor ref=md style="height: 400px" v-model="desc" @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>

图片插入与回显，在此过程中我加入图片高度的设置，可手动修改图片高度

$imgAdd (pos, $file) {
      this.$prompt('请设置图片高度(可更改)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入不能为空',
        inputValue: '500',
        inputValidator: (value) => {
          if (!value) {
            return '输入不能为空'
          }
        }
      }).then(({ value }) => {
        // 第一步.将图片上传到服务器.
        // const _this = this
        const multipartFile = new FormData()
        console.log('名字', this.addForm1.name)
        if (this.addForm1.name === '' || this.addForm1.name === 'undefined') {
          multipartFile.append('name', this.realname)
        } else {
          multipartFile.append('name', this.addForm1.name)
        }
        console.log(value)
        const height = value
        multipartFile.append('height', height)
        console.log('长度', height)
        multipartFile.append('img', $file)
        this.$http.post('imgs/', multipartFile)
          .then((res) => {
            console.log(res)
            this.url = res.data.data.img
            this.urlsplit = (this.url).split('/')
            this.picname = this.urlsplit[this.urlsplit.length - 1]
            this.picnameURL = this.picname
            console.log('配置name', this.picnameURL)
            console.log('url', this.url)
            console.log('imagId', res.data.data.id)
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            /**
             * $vm 指为mavonEditor实例，可以通过如下两种方式获取
             * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
             * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
             */
            //  $vm.$img2Url(pos, url);
            // console.log('上传图片了哦')
            // console.log(res)
            // console.log('res==', res.results.data.image_url[0])
            this.$refs.md.$img2Url(pos, this.url)
          })
      }).catch(() => {
        this.$message.error('上传图片失败,请删除左侧图片信息后重试！')
        this.$refs.md.$img2Url(pos, '该数据无效，请删除该条数据重新上传图片！')
      })
    },

图片的删除

$imgDel (pos) {
      delete this.img_file[pos]
},

以上就是mavon-editor的内容，后续会更新功能更丰富的tinymce组件 vue + ElementUI配合使用富文本编辑器 —— tinymce篇