可以拖拽的富文本编辑器（VueDragResize，quill-editor）

zifengningyu

已于 2024-07-08 16:19:26 修改

阅读量299

点赞数 3

文章标签：前端

于 2024-07-08 16:19:02 首次发布

本文链接：https://blog.csdn.net/zifengningyu/article/details/140271865

版权

该功能实现一个帮助文档的展示和编辑功能，默认进去只能查看帮助文档的内容，点击编辑可以进行富文本编辑器的编辑功能。

出现的问题
1.如何隐藏富文本编辑的工具栏并且禁止编辑

  //隐藏工具栏
    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失去焦点，无法进行四周的拉伸与收缩

   this.$refs.moveContainer.active=true;
   //每当离开编辑器的时候手动给VueDragResiz赋予可拖拽

完整代码：

<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>