轻量级富文本编辑器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数据分享
May 12 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP时间函数使用详解
2019/03/21 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
React Router基础使用
2017/01/17 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
jQuery分组选择器简单用法示例
2019/04/04 jQuery
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
学习python可以干什么
2019/02/26 Python
Python Django基础二之URL路由系统
2019/07/18 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
美术教师自我鉴定
2014/02/12 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
商场父亲节活动方案
2014/08/27 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis