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

啦啦啦啦啦！我又来更新了！

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

 

那么重点来咯！

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

 npm uninstall mavon-editor  命令，它就会自动安装！

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

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

 

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

Vue.use(mavonEditor)

 

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

 

3.第三步

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

 

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

: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，不比比，你要是不知道这是个啥，那就以头抢地尔！

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 : `，`$vm`为 `this.$refs.md`
    * 3. 由于vue运行访问的路径只能在static下，so，我就把图片保存到它这里了
     */
    this.$refs.md.$img2Url(pos, 'http://localhost:8002/static/image/' + url.data.data)
  })

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

 

完事，拜拜！

 

加入我们群

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