在vue项目中使用MavonEditor，实现上传图片！

逃离我推掉我的手 2022-10-02 12:50 516阅读 0赞

啦啦啦啦啦！我又来更新了！![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDYvMjAxOTA2MTgyMTQ4MjMxODcuZ2lm][]

由于ckeditor过于复杂，当然有可能是因为博主的过于愚笨，导致上传图像失败，并且浪费我宝贵的时间，so，我就还是选择一个比较中规中矩的编辑器，够我使用就ok了！![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDYvMjAxOTA2MTgyMTUxMjgxMjEuZ2lm][]

那么重点来咯！

1.首先进进入项目的目录下，摁住shift+右键，![format_png][]，运行

npm uninstall mavon-editor  命令，它就会自动安装！![format_png 1][]

2.安装完事之后呢，我们就要在项目中引入了。

打开项目中main.js 引入 mavon-editor

完事，你还需要在main.js中加入

Vue.use(mavonEditor)

Vue.component('iv-row', Row)

3.第三步

在你要用到这个富文本编辑的页面下，使用mavon-editor标签就可以了。![format_png 2][]

<iv-formItem label="文章内容：">
        <mavon-editor ref=md @imgAdd="imgAdd"  v-model="article.articleContent" :toolbars="toolbars" @change="mavonChangeHandle"/>
    </iv-formItem>

4.重点2来咯，菜单栏自定义！！！放到return下。![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jbi9zdGF0aWMvdjIwMTgwNi9qcy9ja2VkaXRvci9wbHVnaW5zL3NtaWxleS9pbWFnZXMvNzMuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jbi9zdGF0aWMvdjIwMTgwNi9qcy9ja2VkaXRvci9wbHVnaW5zL3NtaWxleS9pbWFnZXMvNzMuZ2lm][]

:toolbars="toolbars"   //就是这个东东

toolbars: {
      bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: false, // 标记
      superscript: false, // 上角标
      subscript: false, // 下角标
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏编辑
      readmodel: false, // 沉浸式阅读
      htmlcode: true, // 展示html源码
      help: false, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: false, // 下一步
      trash: false, // 清空
      save: false, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: false, // 导航目录
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
      /* 2.2.1 */
      subfield: true, // 单双栏模式
      preview: true, // 预览
      boxShadow: false

5.上传图片也就是

@imgAdd="imgAdd"

这个事件，上代码，不磨磨唧唧，整的我都不严肃了。

这个你得区分来看，这是一个请求，全局路由配置，我就不多说了，我的是这个this.$http.adornUrl，你的是什么，怎么配置的我管不着！

pos你的编辑区内容，下边也说到了会完成替换。file，不比比，你要是不知道这是个啥，那就以头抢地尔！![format_png 3][]

imgAdd (pos, file) {
    // 上传图片
      var formData = new FormData()
      formData.append('image', file)
      axios({
        url: this.$http.adornUrl('/article/uploadImageByEditor'),//请求地址
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then((url) => {
        // console.log(JSON.stringify(url))
        // 第二步.将返回的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`
        * 3. 由于vue运行访问的路径只能在static下，so，我就把图片保存到它这里了
         */
        this.$refs.md.$img2Url(pos, 'http://localhost:8002/static/image/' + url.data.data)
      })

为了大家写代码能力提升，后台代码我就不贴了，百度一大堆哦！！！！！

完事，拜拜！

![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]![aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm][]

### 加入我们群 ###

如果有需要，欢迎可以加入我们的QQ群！（QQ搜索 816175200，加入我们的QQ群吧！）  
有任何问题，也可以加入我们的QQ群，欢迎交（che）流（dan）！也欢迎参观我的博客[www.aquestian.cn][]！

[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDYvMjAxOTA2MTgyMTQ4MjMxODcuZ2lm]: /images/20220112/561d1eb44ff94eeb8d4083802e4840f6.png
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDYvMjAxOTA2MTgyMTUxMjgxMjEuZ2lm]: /images/20220112/ee3eb52915df45c392a661e29a551436.png
[format_png]: /images/20220112/1e9fc2dca0fe47358186988694d2eb86.png
[format_png 1]: /images/20220112/9539af9ad2e6462183fdda8b81b72422.png
[format_png 2]: /images/20220112/c3637e22d9334befb7256f8f9474cb32.png
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jbi9zdGF0aWMvdjIwMTgwNi9qcy9ja2VkaXRvci9wbHVnaW5zL3NtaWxleS9pbWFnZXMvNzMuZ2lm]: /images/20220112/e9a6b605fc7249a0a0361ba496c1572f.png
[format_png 3]: /images/20220112/02780064bafe43b38632531d14f5e68f.png
[aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDUvMjAxOTA1MjUxMzE2NDcwMzNfNjBYNDAuZ2lm]: /images/20220112/3b1dd29152cd4a37a0217f207d7999b2.png
[www.aquestian.cn]: http://www.aquestian.cn/