vue项目中使用富文本编辑器（wangeditor）

wangeditor官方教程：https://www.kancloud.cn/wangfupeng/wangeditor3/

一、在vue项目中安装wangeditor

npm install wangeditor

二、在vue页面中使用wangeditor,如在editor.vue文件中创建富文本编辑器

<template>
  <div class="wang-editor">
  
    <p>1、将头部和编辑的区域不分开的富文本编辑器</p>
    <div id="editor" class="editor">
      <span>{{msg}}</span>
    </div>


    <p>2、将头部和编辑的区域分开的富文本编辑器</p>
    <div id="editorToolBar" class="editor-tool-bar" title="富文本的头部"></div>
    <div id="editorContent" class="editor-content" title="富文本的编辑区域"></div>
    
  </div>
</template>

<script>
import Editor from 'wangeditor';
export default {
  name: 'Editor',
  data () {
    return {
      editor1:null,
      editor2:null,
      editorContent:'',
      msg:'11111',//富文本编辑器中默认初始化的内容
    }
  },
  mounted(){
    this.createEditor();
  },
  methods: {
    //创建富文本编辑器
    createEditor(){
      //一、将头部和编辑的区域不分开的富文本编辑器
      this.editor1 = new Editor('#editor');
      console.log(this.editor1.txt.html());//获取编辑器内，含有html标签的所有内容
      console.log(this.editor1.txt.text());//获取编辑器内，纯文本的所有内容
      this.editor1.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ];//编辑器头部的操作功能菜单
      this.editor1.customConfig.onchangeTimeout = 1000;//编辑内容改变的函数的时间等待
      this.editor1.customConfig.onchange = function (html) {
        console.log(html);
      }//编辑内容改变的函数
      this.editor1.customConfig.zIndex = 100000;//同时改变头部和编辑区的z-index
      this.editor1.customConfig.pasteFilterStyle = false;//去除粘贴文本时自带 的样式
      this.editor1.customConfig.pasteIgnoreImg = true;//去除粘贴时自带的图片
      this.editor1.customConfig.pasteTextHandle = function (content) {//粘贴文本时的函数
        console.log(content);//打印粘贴的文本
      }//粘贴文本时的函数
      this.editor1.customConfig.onblur = function (html) {//编辑器失去焦点
        console.log('onblur');
        console.log(html);//编辑器中的内容
      }//编辑器失去焦点
      this.editor1.customConfig.onfocus = function () {//编辑器获得焦点
        console.log('onfocus');
      }//编辑器获得焦点
      this.editor1.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
      ];//自定义配置颜色（字体颜色、背景色）
      this.editor1.create();



      //二、将头部和编辑的区域分开的富文本编辑器
      this.editor2 = new Editor('#editorToolBar','#editorContent');
      this.editor2.create();
      this.editor2.$textElem.attr('contenteditable',false);//禁用编辑功能,进而无法输入内容
      this.editor2.$textElem.attr('contenteditable',true);//开启编辑功能
      this.editor2.txt.html('312213213');//设置文本中的内容
      this.editor2.txt.clear();//清除文本中的内容
    }
  }
}
</script>

<style scoped lang="less">
  .wang-editor{
    width: 100%;
    height: 100%;
    p{
      background: #dcddcc;
      height: 30px;
      font-size: 24px;
    }
    .editor{
      width: 800px;
      height: 300px;
      margin: 50px auto;
      text-align: left;
    }
    .editor-tool-bar{
      width: 800px;
      margin: 0 auto;
      border: 1px solid #000;
      background: #ccc;
    }
    .editor-content{
      width: 800px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #000;
      text-align: left;
    }
  }

</style>