vue中使用wangEditor富文本编辑器

wangEditor富文本编辑器

此富文本编辑器主要是小巧，且改动地方也不多，具体用法如下

1：下载该富文本编辑器

npm install wangeditor --save

2：用法，

1）一个div即可，dom结构

<div class="editor" id="editor" ref="editor">


          </div>
          <div class="a-btn">
            <a href="javascript:void(0)">提交</a>
          </div>

2）css

  .editor{
    width: 100%;
    height: 300px;
    margin-bottom: 40px;
  }
  .a-btn{
    padding-bottom: 80px;
  }
  .a-btn a{
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    width: 100px;
    text-align: center;
    float: right;
    background: dodgerblue;
  }

3）javascript部分

import E from 'wangeditor'

data(){
    return {
        editor : ""
    }
},
mounted(){
    this.editor = new E("#editor");//new即可
    //下面的为一些配置参数，默认全部都有，我们需要那些留下那些即可
    this.editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            //'backColor',  // 背景颜色
            //'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            //'emoticon',  // 表情
            //'image',  // 插入图片
            'table',  // 表格
            //'video',  // 插入视频
            //'code',  // 插入代码
            //'undo',  // 撤销
            //'redo'  // 重复
          ];
          //聚焦时候函数
          this.editor.customConfig.onfocus = function () {
            //console.log("onfocus")
          };
          //失焦时候函数
          this.editor.customConfig.onblur = function () {
            //console.log("onblur")
          };
          //change事件，当富文本编辑器内容发生变化时便会触发此函数
          this.editor.customConfig.onchange = function (text) {
            console.log(text)
          };
          this.editor.create();//以上配置完成之后调用其create()方法进行创建
          this.editor.txt.html("<p>欢迎使用wangEditor编辑器</p>");//创建完成之后的默认内容
          //点击事件，拿到富文本编辑器里面的值
          $(".a-btn a").on("click", ()=> {
            //富文本编辑器里面的内容我们可以输出为html（布局）格式，也可以输出位text（文本）格式
            console.log(this.editor.txt.text());
            console.log(this.editor.txt.html());
            //this.editor.change && this.editor.change();
          })
}

最终结果如下