设置可编辑和不可编辑,先上效果图
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: []注释打开但是里面的注释不要放开,如图: