【wangeditor】富文本实现placeholder功能

效果

 

Template

<template>
  <div>
    <div class="wangEditor">
      <div :id="editorId" ref="toolbar" class="wangEditor-toolbar"></div>
      <div ref="wangEditor" class="wangEditor-text">
      <!--    <span class="wangEditor-deleteIcon el-icon-circle-close" @click="reset"></span>-->
      </div>
    </div>
    <div :style="{position: 'absolute',left: '15px',top: '6px'}">
      <input
        ref="placeHolder"
        type="text"
        :placeholder="placeholder"
        :style="{border: 'none', background: '#fff', outline: 'none', width: '100%', color: '#ccc', margin: '0', height: '20px'}"
        @mousedown="hidePlace"
      >
    </div>
  </div>
</template>

数据

import E from 'wangeditor'

    props: {
      value: {
        type: String,
        default: ''
      },
      editorId: {
        type: String,
        default: ''
      },
      disableTag: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        editor: null,
        info_: null
      }
    },

监听

    watch: {
      // value为父组件的传值，
      value: function (value) {
        const vm = this;
        if (value !== this.editor.txt.html()) {
          vm.editor.txt.html(vm.value)
        }
        this.$refs.placeHolder.style.display = this.editor.txt.text().length !== 0 ? 'none' : 'block'
        vm.$emit('change', value)
      }
    },

详解
1. mounted的时候，父组件的数据回显，有数据的时候要将placeholder输入框隐藏掉

    mounted () {
      this.setEditor(this.editorId);
      // this.editor.txt.html(this.value)
      this.$refs.placeHolder.style.display = this.editor.txt.text().length !== 0 ? 'none' : 'block'
    },

2. 定义editor的时候，对应的焦点和失焦事件要处理placeholder的显隐

    methods: {
      // 隐藏input输入框
      hidePlace () {
        this.$refs.placeHolder.style.display = 'none'
      },
      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 () {
          vm.$refs.placeHolder.style.display = 'none'
          setTimeout(() => {
            // console.log('???', toolbar.nextSibling.nextSibling);
            toolbar.style.display = 'block';
            toolbar.nextSibling.nextSibling.style.borderColor = '#1c61fc'
          }, 100);
        };
        // 失焦的时候，editor有内容则输入框隐藏，否则出现
        vm.editor.customConfig.onblur = function () {
          vm.$refs.placeHolder.style.display = vm.editor.txt.text().length !== 0 ? 'none' : 'block'
          setTimeout(() => {
            toolbar.style.display = 'none';
            // 将当前页面的所有富文本处理,第一个边框为灰色，其他的边框都无色
            const richDom = document.getElementsByClassName('wangEditor-text')
            for (var i = 0; i < richDom.length; i++) {
              if (i === 0) {
                richDom[i].style.borderColor = '#cdcdcd'
              } else {
                richDom[i].style.borderColor = 'transparent'
              }
            }
          }, 100);
        };
        // editor  change事件，同步内容
        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 = '#606266'
          } else {
            editorDom[i].style.color = '#606266'
          }
        }
      },
      // 清空内容
      reset () {
        this.editor.txt.clear();
        this.$emit('change', '')
      }
    }