vue中使用wangEditor富文本编辑器记录

一、wangEditor是什么？

• 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用

• 包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】

 

二、使用步骤

1.加载依赖

npm install wangeditor

2.创建公共组件

在components中创建wangEnduit文件夹

 

3.编写index.vue组件

<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
//   import 'wangeditor/release/wangEditor.min.css'  
export default {
  name: 'editoritem',
  data () {
    return {
      // uploadPath,  
      editor: null,
      info_: null
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isClear (val) {
      // 触发清除文本域内容  
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值  
  },
  mounted () {
    this.seteditor()
    this.editor.txt.html(this.value)
  },
  methods: {
    seteditor () {
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      this.editor.config.uploadImgShowBase64 = false // base 64 存储图片  
      this.editor.config.uploadImgTimeout = 50000;
      this.editor.config.uploadImgServer = 'http://10.17.33.230:8080/non_pub/resource/uploadResource' // 填写配置服务器端地址
      this.editor.config.uploadImgParams = {'type':0}
      this.editor.config.uploadImgHeaders = { 'token': sessionStorage.token } // 自定义 header 
      this.editor.config.zIndex = 100// base 64 存储图片  
      this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名  
      this.editor.config.uploadImgMaxSize = 15 * 1024 * 1024 // 将图片大小限制为 2M  
      this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片  
      // 配置菜单  
      this.editor.config.menus = [
        'head', // 标题  
        'bold', // 粗体  
        'fontSize', // 字号  c
        'fontName', // 字体  
        'italic', // 斜体  
        'underline', // 下划线  
        'strikeThrough', // 删除线  
        'foreColor', // 文字颜色  
        'backColor', // 背景颜色  
        'link', // 插入链接  
        'list', // 列表  
        'justify', // 对齐方式  
        'quote', // 引用  
        'emoticon', // 表情  
        'image', // 插入图片  
        'table', // 表格  
        'video', // 插入视频  
        'code', // 插入代码  
        'undo', // 撤销  
        'redo', // 重复  
        'fullscreen' // 全屏  
      ]
      this.editor.config.uploadImgHooks = {
        before: function () {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function () {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function () {
          alert("图片上传错误，请检查图片大小！")
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function () {
          alert("图片上传错误，请检查图片大小！")
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function () {
          alert("图片上传错误，请检查网络！")
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          var url = result.data.url
          insertImg(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      this.editor.config.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值  
        this.$emit('change', this.info_) // 将内容同步到父组件中  
      }
      // 创建富文本编辑器  
      this.editor.create()
    }
  }
}
</script>

<style lang="css">
.editor {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.toolbar {
  border: 1px solid #ccc;
}
.text{
  height: 500px;
}
.w-e-toolbar{
  height: 50px;
  align-items: center;
}
.el-card__body {
    padding: 35px;
}
</style>

4.调用组件 

<template>  
<div>  
    <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>  
</div>  
</template>  
<script>  
import EditorBar from '../../components/wangEnduit'  
export default {  
    components: { EditorBar },  
    data() {  
      return {  
            test:'',  
            isClear: false,  
            detail:""  
        }  
      },    
    methods: {  
        change(val) {  
            console.log(val)  
        },  
    }  
}  
</script>  

5.其他需求 

官方文档：http://www.wangeditor.com/

6.效果图