人间蒸发的gravatar头像
人间蒸发 2019-06-18 22:51:17
沙雕程序员(三)—— 在vue项目中使用MavonEditor,并且上传图片!

啦啦啦啦啦!我又来更新了!

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

 

那么重点来咯!

1.首先进进入项目的目录下,摁住shift+右键,沙雕程序员(三)—— 在vue项目中使用MavonEditor,并且上传图片!,运行

 npm install mavon-editor  命令,它就会自动安装!

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

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

沙雕程序员(三)—— 在vue项目中使用MavonEditor,并且上传图片!

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

Vue.use(mavonEditor)

就在上图中上边加就可以了。

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

3.第三步

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

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

沙雕程序员(三)—— 在vue项目中使用MavonEditor,并且上传图片!

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 : `<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)
  })

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

 

完事,拜拜!


打赏

已有2人打赏

无敌的软妹的gravatar头像 最代码官方的gravatar头像
最近浏览
tzz0920 2023年2月14日
暂无贡献等级
世纪末的架构师 2022年1月8日
暂无贡献等级
zcbm16  LV1 2021年12月10日
zzhua195  LV6 2021年3月26日
yyd-yun  LV9 2020年11月6日
郑报元a  LV4 2020年10月10日
563434504 2020年10月7日
暂无贡献等级
youren 2020年7月31日
暂无贡献等级
muwenjie  LV1 2020年7月28日
wkc  LV21 2020年6月28日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友