轻量级富文本编辑器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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
php实现的二分查找算法示例
2017/06/20 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
应用英语专业自荐信
2014/01/26 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
自荐信格式范文
2015/03/04 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python