UEditor组件封装，重写上传文件功能，重写全屏样式（Vue版本）

最新推荐文章于 2025-09-16 07:07:23 发布

原创

最新推荐文章于 2025-09-16 07:07:23 发布 · 770 阅读

1 ·

CC 4.0 BY-SA版权

前言：

使用百度编辑器，重写上传功能，将编辑器的上传图片，上传音视频功能禁用，在工具栏中多加一个上传文件的功能（这是一个文件柜，支持上传图片/音频/视频/压缩文件/文本文档）
将ueditor封装成组件，编辑器的id要随机生成的，这里编辑器的id我拿的是时间戳
this.editorId = String(new Date().getTime())
修改编辑器的ueditor.config.js配置文件
（1）编辑器的默认层级过高，修改编辑器的默认层级

（2）插入图片时，需要为图片增加style样式

UEditor组件封装

<template>
    <div>
        <div :style="{ overflow: 'hidden'}">
            <div :style="ueditorStyle">
                <script :id="editorId" type="text/plain" :style="ueditorStyle"></script>
            </div>
        </div>

        <!-- 上传文件弹层 -->
        <FileGroupModal  v-if="showObj.visible"
                         @cancel="showObj.visible = false"
                         :sysType="sysType"
                         @changeImgUrl="(files) => { changeFileCabinets(files)}" />
    </div>
</template>
<script>
    import FileGroupModal from "@/components/FileGroupModal";
    let showObj ={
   
   
        visible: false
    }
    export default {
   
   
        name: 'UE',
        components: {
   
   
            FileGroupModal
        },
        data () {
   
   
            return {
   
   
                editorId: '',
                modalStatus: true,
                editor: null,
                showObj: showObj,
                insertImgList: []
            }
        },
        props: {
   
   
            defaultValue: {
   
   
                type: String
            },
            config: {
   
   
                type: Object
            },
            ueditorStyle: {
   
   
                type: Object,
                default: ()=>{
   
   
                    return {
   
   
                        width: '600px',
                        minHeight: '600px'
                    }
                }
            },
            sysType: {
   
    // 模块类型，mall（商城）、sitecms（网站）、common（公共）、develop（开发）【不传查询所有】
                type: String,
                default: 'common'
            },
        },
        watch: {
   
   
            'defaultValue': function (newVal, oldValue) {
   
   
                if (this.editor) {
   
   
                    this.editor.setContent