该功能实现一个帮助文档的展示和编辑功能,默认进去只能查看帮助文档的内容,点击编辑可以进行富文本编辑器的编辑功能。
- 出现的问题
- 1.如何隐藏富文本编辑的工具栏并且禁止编辑
javascript
//隐藏工具栏
this.toolbar = this.$refs.myTextEditor.quill.getModule('toolbar');
this.toolbar.container.style.display = 'none';
//禁止富文本编辑器编辑
onEditorFocus(event) {
if(this.isEdit){
event.enable(true);
}else{
event.enable(false);
}
}, //
- ●控制只有顶部可以进拖拽
●由于控制了只有头部可以拖拽当点击富文本编辑后VueDragResize失去焦点,无法进行四周的拉伸与收缩
javascript
this.$refs.moveContainer.active=true;
//每当离开编辑器的时候手动给VueDragResiz赋予可拖拽
完整代码:
javascript
<template>
<div class="container">
<!--//缩放功能主要是缩放VueDrangResize标签-->
<VueDragResize class="move-container" :isActive="true" :w="490" :h="690" :isResizable="true"
v-on:resizing="resize" :drag-handle="'.title'" v-on:dragging="resize" ref="moveContainer">
<div class="title">
<div class="text">
<span>帮助文档</span>
</div>
<div class="action-panel" style="text-align: right;height: 30px;">
<template v-if="isEdit">
<gf-button type="primary" @click="save"> 保存 </gf-button>
</template>
<gf-button v-else type="primary" @click="handleEdit"> 编辑</gf-button>
<gf-button type="primary" @click="cancel"> 取消 </gf-button>
</div>
</div>
<div class="body" @mouseleave="handleMouseLeave">
<slot name="content">
<quill-editor ref="myTextEditor" :options="editorOption" v-model="content" :config="editorOption"
@focus="onEditorFocus($event)" class="quill-container"></quill-editor>
</slot>
</div>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
components: {
VueDragResize
},
props: {
compTitle: {
type: String,
default: ''
},
data: {
type: String,
default: "<p>每个人都有一份属于自己的责任,需要自己去担当,去完成。只有我们担当起了自己的责任时,才能把事情做好。就像我们学生的'责任主要是抓好学习,教师的责任主要是给学生传授知识,警察的责任主要是维护社会治安,而清洁工人的责任主要是打扫卫生...孙中山先生说过:"我辈既以担当中国改革发展为己任,虽石烂海枯,而此身尚存,此心不死。既不可以失败而灰心,亦不能以困难而缩步。全神贯注,猛力向前,应付世界进步之潮流,合乎善长恶消之天理,则终有最后成功之一日。"孙先生的一席话告诉我:做一件事<img src=\"data:image/png;base64,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"
}
},
data() {
return {
vw: 0,
vh: 0,
top: 0,
left: 0,
editorOption: {
},
isEdit:false,
helpContent:'',
toolbar,
content:''
}
},
created() {
this.vw = 290 + 'px'
this.vh = 300 + 'px'
},
mounted() {
this.content = this.data;
// this.$refs.myTextEditor.quill.enable(false);//解决富文本自动聚焦问题
this.toolbar = this.$refs.myTextEditor.quill.getModule('toolbar');
this.toolbar.container.style.display = 'none';
},
methods: {
// 缩小
resize(newRect) {
this.vw = newRect.width
this.vh = newRect.height
this.top = newRect.top
this.left = newRect.left
},
async save(){
this.$emit("cancelHelp");
},
cancel(){
this.$emit("cancelHelp");
},
onEditorFocus(event) {
if(this.isEdit){
event.enable(true);
}else{
event.enable(false);
}
}, // 获得焦点事件
handleEdit() {
this.isEdit = true; // 切换到编辑模式
this.toolbar.container.style.display = 'block'; // 显示工具栏
},
handleMouseLeave(){
// 使拖拽组件重新获取焦点
this.$refs.moveContainer.active=true;
}
}
}
</script>
<style lang="less" scoped>
.container {
position: absolute;
top: 26px;
right: 500px;
z-index: 9999;
}
.move-container {
border: 1px solid #A8AED3;
border-radius: 14px;
background: #fff;
}
.content-container{
width: 100%;
height: 100%;
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
padding: 4px;
background: #EFF2FB;
cursor: move;
}
.text{
padding-left:8px;
}
.body {
width: 100%;
height: calc(100% - 40px);
overflow: auto;
}
.quill-container{
height: 100%;
}
</style>
<style>
.vdr-stick {
display: none;
/* 默认隐藏拖拉点 */
}
.move-container:hover .vdr-stick {
display: block;
/* 鼠标移入时显示拖拉点 */
}
</style>
效果: