wangseditor 如何禁选

387 阅读1分钟

//===============================配置文件==============================

<template>
  <div ref="editor"></div>
</template>

<script>
  import E from 'wangeditor';
  import {uploadServlet} from '@/api/manage'

  export default {
    props: {
      value: {
        type: String,
        default: '',
      },
      meanArray: {
        // 自定义菜单
        type: Array,
        default: null,
      },
      status:{
        type:[String,Boolean],
        default: null,
      }
    },
    model: {
      prop: 'value',
      event: 'change',
    },
    watch: {
      value: function (value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value);
        }
      },
      //value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
    },
    data() {
      return {
        // 默认有这么多菜单,meanArray有值以meanArray为准
        defaultMeanus: [
          'head',
          'bold',
          'fontSize',
          'fontName',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          'list',
          'justify',
          'quote',
          'emoticon',
          'image',
          'video',
          'table',
          'code',
          'splitLine',
          'undo',
          'redo',
        ],
        editor: '',
      };
    },
    methods: {
      init() {
        const _this = this;
        this.editor = new E(this.$refs.editor);
        this.editor.config.zIndex = 500;//修改默认层级
        this.editor.config.uploadImgShowBase64 = false; // 使用 base64 保存图片
        this.setMenus(); //设置菜单
        this.editor.config.onchange = (html) => {
          _this.$emit('change', html); // 将内容同步到父组件中
        };
        this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
          const params = {
            'upload_sysName': 'tsk',
            'upload_folder': 'tsAttachFile',
            file: resultFiles[0]
          }
          uploadServlet(params).then(res => {
            console.log(res, 'res')
            if (res.flag == 'T') {
              insertImgFn(res.murl)
            }
          })
        }
        this.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
          const params = {
            'upload_sysName': 'tsk',
            'upload_folder': 'tsAttachFile',
            file: resultFiles[0]
          }
          uploadServlet(params).then(res => {
            console.log(res, 'res')
            if (res.flag == 'T') {
              insertVideoFn(res.murl)
            }
          })
        }
        this.editor.create(); //创建编辑器
        if(this.status){//父组件传值,用来标示是否禁止选择
          this.editor.disable();
        }
      },
      setMenus() {
        // 设置菜单
        if (this.meanArray) {
          this.editor.config.menus = this.meanArray;
        } else {
          this.editor.config.menus = this.defaultMeanus;
        }
      },
      getHtml() {
        // 得到文本内容
        return this.editor.txt.html();
      },
      setHtml(txt) {
        // 设置富文本里面的值
        this.editor.txt.html(txt);
      },
    },
    mounted() {
      let that = this;
      that.$nextTick(function () {
        that.init();
      });
    },
  };
</script>



//===============================如何使用==============================

          <editor ref="editorOne" :status="true" v-model="singleObj.remark"></editor>