【wangeditor】富文本的使用

1.  富文本组件

<template>
  <div class="wangEditor">
// 工具栏
    <div :id="editorId" ref="toolbar" class="wangEditor-toolbar"></div>
// 输入部分
    <div ref="wangEditor" class="wangEditor-text"></div>
// 手动添加的清空按钮
    <!--    <span class="wangEditor-deleteIcon el-icon-circle-close" @click="reset"></span>-->
  </div>
</template>

<script>
  import E from 'wangeditor'

  export default {
    name: 'RichEditor',
    componentName: 'richEditor',
    props: {
      value: {
        type: String,
        default: ''
      },
      editorId: {
        type: String,
        default: ''
      },
      disableTag: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        editor: null,
        info_: null
      }
    },
    watch: {
      value: function(value) {
        const vm = this;
        if (value !== this.editor.txt.html()) {
          vm.editor.txt.html(vm.value)
        }
        vm.$emit('change', value)
      }
    },
    mounted () {
      this.setEditor(this.editorId);
      // this.editor.txt.html(this.value)
    },
    methods: {
      setEditor (id) {
        const vm = this;
        vm.editor = new E(vm.$refs.toolbar, vm.$refs.wangEditor);
        // 配置菜单
        vm.editor.customConfig.menus = [
          'link' // 插入链接
        ];
        vm.editor.customConfig.zIndex = 10;
        // 焦点和失焦时候，工具栏的显示与隐藏
        const toolbar = document.getElementById(id);
        vm.editor.customConfig.onfocus = function () {
          setTimeout(() => {
            // console.log('???', toolbar.nextSibling.nextSibling);
            toolbar.style.display = 'block';
            toolbar.nextSibling.nextSibling.style.borderColor = '#1c61fc'
          }, 100);
        };
        vm.editor.customConfig.onblur = function () {
          setTimeout(() => {
            toolbar.style.display = 'none';
            // 将当前页面的所有富文本处理,第一个边框为灰色，其他的边框都无色 （设计需要，存在多层级效果）
            const richDom = document.getElementsByClassName('wangEditor')
            // console.log(document.getElementsByClassName('wangEditor'));
            for (var i = 0; i < richDom.length; i++) {
              if (i === 0) {
                richDom[i].lastChild.style.borderColor = '#cdcdcd'
              } else {
                richDom[i].lastChild.style.borderColor = 'transparent'
              }
            }
          }, 100);
        };
        vm.editor.customConfig.onchange = (html) => {
          vm.info_ = html; // 绑定当前组件的值
          vm.$emit('change', vm.info_); // 将内容同步到父组件中
        };
        const ED = new E('.wangEditor')
        ED.customConfig.zIndex = 100

        // 创建富文本编辑器
        vm.editor.create();
        vm.editor.selection.getSelectionText();
        vm.editor.txt.html(vm.value);
        // 启用与禁用
        if (vm.disableTag) {
          vm.editor.$textElem.attr('contenteditable', false)
        } else {
          vm.editor.$textElem.attr('contenteditable', true)
        }
        // 启用与禁用时的文字颜色
        const editorDom = document.getElementsByClassName('w-e-text')
        for (var i = 0; i < editorDom.length; i++) {
          // console.log(editorDom[i].contentEditable);
          if (editorDom[i].contentEditable === 'false') {
            editorDom[i].style.color = '#C0C4CC'
          } else {
            editorDom[i].style.color = '#606266'
          }
        }
      },
      // 清空内容
      reset () {
        this.editor.txt.clear();
        this.$emit('change', '')
      }
    }
  }
</script>

<style lang="less" scoped>
  @import './richEditor';
</style>
2.  父组件的使用

<el-form-item
  v-for="(item, index) in projForm.productInsurance"
  :key="item.key"
  class="hasTwoLevel hasEditor"
  :class="index!==0 ? 'hasNoPad' : ''"
  :label="index + 1 + '.'"
  :prop="'productInsurance.' + index + '.oneInsuranceContent'"
>
  <RichEditor
    :editor-id="item.linkSpanId"
    :value="item.oneInsuranceContent"
    :disable-tag="getLookInfo"
    placeholder="请输入一级内容"
    @change="val => {getTxt(val, item)}"
  ></RichEditor>
  <!--添加二级按钮-->
  <el-tooltip popper-class="el-tooltip__change" effect="dark" content="添加二级内容" placement="top">
    <el-button class="addIcon el-icon-plus" @click.prevent="addSubInput(item, index)" />
  </el-tooltip>
  <!--删除一级按钮-->
  <el-button v-if="index!==0" class="deleteIcon el-icon-delete-solid" @click.prevent="removeInput(item)" />
  <el-form-item
    v-for="(item1, index1) in item.twoInsuranceContentList"
    :key="item1.key"
    class="subItem noEditor hasNoPad"
    label=""
    :prop="'productInsurance.' + index + '.twoInsuranceContentList.' + index1 + '.twoInsuranceContent'"
  >
    <RichEditor
      :editor-id="item1.linkSpanId"
      :value="item1.twoInsuranceContent"
      :disable-tag="getLookInfo"
      placeholder="请输入二级内容"
      @change="val => {getSubTxt(val, item1)}"
    ></RichEditor>
    <el-button class="deleteIcon deleteIcon-sub el-icon-delete-solid" @click.prevent="removeSubInput(item1, index)" />
  </el-form-item>
</el-form-item>
<el-form-item class="addBtn">
  <el-button class="el-icon-plus" @click="addInput">添加一级内容</el-button>
</el-form-item>

详解：
1.实现的效果： 点击输入框，显示‘添加超链接按钮’，失焦消失
2.在每次添加输入框的时候，会添加一个对应的linkSpanId，传给富文本组件，以使得可以找到相对应的富文本

projForm: {
  productInsurance: [{
    oneInsuranceContent: '',
    twoInsuranceContentList: [],
    linkSpanId: 'linkSpan' + Date.now()
  }]
}

3.父组件获取子组件的值，改、该值为html标签

getTxt (val, item) {
  item.oneInsuranceContent = val
},
getSubTxt (val, item) {
  item.twoInsuranceContent = val
},

*******如果输入框有默认的值得话，也应当为标签，否则初始化数据回显的时候，光标会在新的一行

vm.introBox = [{
  areaCode: '00000000',
  contentList: [{
    oneInsuranceContent: '<p>支付成功后，如需退保或修改保单信息，请您于保险生效日期前前往营业厅办理</p>',
    twoInsuranceContentList: [],
    linkSpanId: 'linkSpan' + Date.now()
  }]
}]

 

 3.   实现的效果