轻量级富文本编辑器wangEditor结合vue使用方法示例


Posted in Javascript onOctober 10, 2018

1、安装

使用npm下载: `npm install wangeditor`

2、 创建实例

(1)基本用法:

<template>
  <div>
    <div id="editor" class="editor"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  mounted () {
    var editor = new E('#editor')
    editor.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    editor.create()
  }
}
</script>

效果如图

轻量级富文本编辑器wangEditor结合vue使用方法示例

(2)自定义高度写法如下:把菜单和编辑框分开

<template>
  <div>
    <div id="editorMenu" class="editorMenu"></div>
    <div id="editor" class="editor"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  name: 'editor',
  mounted () {
    var editor = new E('#editorMenu', '#editor')
    editor.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    editor.create()
  }
}
</script>
<style scoped>
.editorMenu {
 border: 1px solid #ccc;
}
.editor {
 margin-top: -1px;//将多出来的一像素边框隐藏
 border: 1px solid #ccc;
 min-height: 400px;//编辑框最小高度
 height:auto;//编辑框高度超过最小高度会根据内容高度自适应
}
</style>

3、上传图片

(1)editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

(2)editor.customConfig.uploadImgServer = '/upload' // 上传服务器端地址

/upload是上传图片的服务器端接口,接口返回的数据格式如下(固定的,否则会取不到图片地址!!!):

{
  // errno 即错误代码,0 表示没有错误。
  //    如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
  "errno": 0,

  // data 是一个数组,返回若干图片的线上地址
  "data": [
    "图片1地址",
    "图片2地址",
    "……"
  ]
}

这些基本就够用了。官网也写得很详细滴

wangeditor3+vue2.0简单例子

把wangeditor作为组件的形式使用

子组件中

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div> 
</template>

<script>
 import E from 'wangeditor'
 export default {
   name: 'editorElem',
   data () {
    return {
     editorContent: '',
    }
   },
   props:['catchData'],  //接收父组件的方法
   mounted() {
     var editor = new E(this.$refs.editorElem)    //创建富文本实例
     editor.customConfig.onchange = (html) => {
       this.editorContent = html
       this.catchData(html) //把这个html通过catchData的方法传入父组件
     }
     editor.customConfig.uploadImgServer = '你的上传图片的接口'
     editor.customConfig.uploadFileName = '你自定义的文件名'
     editor.customConfig.uploadImgHeaders = {
       'Accept': '*/*',
       'Authorization':'Bearer ' + token  //头部token
     }
     editor.customConfig.menus = [     //菜单配置
       'head',
       'list', // 列表
       'justify', // 对齐方式
       'bold',
       'fontSize', // 字号
       'italic',
       'underline',
       'image', // 插入图片
       'foreColor', // 文字颜色
       'undo', // 撤销
       'redo', // 重复
      ] 
           //下面是最重要的的方法
     editor.customConfig.uploadImgHooks = {
       before: function (xhr, editor, files) {
         // 图片上传之前触发
         // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
         
         // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
         // return {
         //   prevent: true,
         //   msg: '放弃上传'
         // }
       },
       success: function (xhr, editor, result) {
         // 图片上传并返回结果,图片插入成功之后触发
         // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
       this.imgUrl=Object.values(result.data).toString()
       },
       fail: function (xhr, editor, result) {
         // 图片上传并返回结果,但图片插入错误时触发
         // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
       },
       error: function (xhr, editor) {
         // 图片上传出错时触发
         // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
       },
       timeout: function (xhr, editor) {
         // 图片上传超时时触发
         // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
       },

       // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
       // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
       customInsert: function (insertImg, result, editor) {
         // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
         // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

         // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
         let url = Object.values(result.data)   //result.data就是服务器返回的图片名字和链接
         JSON.stringify(url)  //在这里转成JSON格式
         insertImg(url)
         // result 必须是一个 JSON 格式字符串!!!否则报错
       }
     }
     
     
     editor.create() 
   },

父组件中

<template>
 <div id="father">
  <wangeditor :catchData="catchData"></wangeditor>
 </div>
</template>

<script>
 import wangeditor from './wangeditor'
data(){
  return{
   content:""
  }
 },
methods:{
  catchData(value){
     this.content=value   //在这里接受子组件传过来的参数,赋值给data里的参数
    }
 },
components: {
  wangeditor
  },
</script>

上面字最多的地方好好看清楚,只有做了customInsert: function (insertImg, result, editor){}里的步骤,图片才会在富文本中显示,否则是不会自动显示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js实现新年倒计时效果
Dec 10 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JS中的三个循环小结
Jun 20 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 #Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 #Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 #Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
Vue 重置组件到初始状态的方法示例
Oct 10 #Javascript
15个顶级开源JavaScript框架和库
Oct 10 #Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 #Javascript
You might like
输出控制类
2006/10/09 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP Reflection API详解
2015/05/12 PHP
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python自定义线程类简单示例
2018/03/23 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
python代码实现猜拳小游戏
2020/11/30 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
航海技术专业毕业生求职信
2014/04/06 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
服务员岗位职责
2015/02/03 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技