vue 使用 ueditor 编辑器，设置不可编辑和可编辑，笔记，补充打开右键功能

设置可编辑和不可编辑，先上效果图

1.不可编辑状态

2.可编辑状态

通过点击按钮实现切换编辑状态

代码

1.关于vue 使用editor，请移步参考我另一篇文章：

vue 集成ueditor（百度富文本编辑器）以及使用后端Java上传图片到服务器，特别注意的大坑

2.以下是已此为基础实现的

使用的地方 xx.vue，下面标签是自定义的组件，editor 被导入时组件名为hzEditor

<hz-oper>
        <div v-if="!isShow">
          <hz-button @click="editEvent">编辑</hz-button>
        </div>
        <div v-if="isShow">
          <hz-button @click="submitEvent">保存</hz-button>
          <hz-button @click="cancelEvent" type="normal">取消</hz-button>
        </div>
      </hz-oper>
      <hz-editor :id="contractEditorId" :config="contractEditorConfig"  ref="introduction"/>

js

data(){
      return{
        /* 基本信息 */
        contractEditorId:"editorId",
        contractEditorConfig:{
          autoHeightEnabled: false,
          autoFloatEnabled: true,
          initialContent:'请输入内容',
          //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
          autoClearinitialContent:true,
          //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
          initialFrameWidth: '100%',
          initialFrameHeight: 700,
          BaseUrl: '',
          UEDITOR_HOME_URL: 'static/framework/ueditor/',
        },
        isShow:false,//
      }
    },
mounted(){
this.detailEvent();
},
methods:{
     
      /****************************************  修改 ************************************************/
      editEvent(){//
        this.isShow = true;
        this.$refs.introduction.setEnabled();
      },
      cancelEvent(){
        this.isShow = false;
        this.$refs.introduction.setDisabled();
      },
      submitEvent(){// 提交修改
        this.modifyForm.introduction = this.$refs.introduction.getUEContent();
          modify(this.modifyForm).then(res=>{
            if(res.data.code === '0'){
              this.detailEvent();
              this.isShow = false;
            }
          })
      },
      /****************************************  详情 ************************************************/
      detailEvent(){
        this.detailForm = {};
        this.isShow = false;
        detail().then(res=>{
          if(res.data.code === '0'){
            this.detailForm = res.data.data;
              if(this.detailForm.introduction) this.$refs.introduction.setUEContent(this.detailForm.introduction);
              setTimeout(()=>{// 设置延时，初始时编辑器尚未加载完毕，报错'contentEditable undfind'
                this.$refs.introduction.setDisabled();
              },10)

          }
        });
      },

    },

3.在上一篇文章中修改ue.vue组件，增加下面两个函数

setDisabled(){// 设置不可编辑
        return this.editor.setDisabled();
      },
      setEnabled(){// 设置可编辑
        return this.editor.setEnabled();
      },

全部代码完毕

打开右键功能

在ueditor.config.js内定位到 enableContextMenu: true，把注释打开  以及 contextMenu: []注释打开但是里面的注释不要放开，如图：