轻量级富文本编辑器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类 from qq
Nov 13 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
详解Vue单元测试case写法
May 24 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 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
5.PHP的其他功能
2006/10/09 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
主要负责人任命书
2014/06/06 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js