【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', '')
      }
    }