# UEditor

**Repository Path**: mjronline/ueditor

## Basic Information

- **Project Name**: UEditor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-26
- **Last Updated**: 2025-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端

## README

# UEditor 文件配置


```
- 但图片上传 修改位置    domUtils.on(input, 'change', function(24330)
- 图片剪裁功能  修改位置 all.min.js ---attachTo(17077)

```
## 插件安装
```
"vue-ueditor-wrap": "^2.4.1",
```

## 一、创建QuillEditor.vue组件， 添加UEditor参数配置项

```vue
<template>
  <div>
    <vue-ueditor-wrap
      @ready="ready"
      v-model="contentNow"
      @beforeInit="addCustomButton"
      :config="myConfig"
    >
    </vue-ueditor-wrap>
    <VVideoPlugin
      :uEInstance="editorInstance"
      :maxSize="3000 * 1024 * 1024"
      @close="dialogVideo = false"
      v-if="dialogVideo"
    />
    <VVideoPlugin
      :uEInstance="editorInstance"
      :maxSize="3000 * 1024 * 1024"
      acceptType=""
      title="文件附件"
      insertType="file"
      @close="dialogFile = false"
      v-if="dialogFile"
    />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import VueUeditorWrap from "vue-ueditor-wrap";
import VVideoPlugin from "./plugins/VideoPlugin.vue";
import { videoUploadBtn, FileUploadBtn } from "./plugins/ueditorCustomBtn.js";
export default {
  components: {
    VueUeditorWrap,
    VVideoPlugin,
  },
  props: {
    content: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 500,
    },
    customBtn: {
      type: Array,
      default: () => ["videoUploadBtn", "FileUploadBtn"],
    },
  },
  data() {
    return {
      dialogVideo: false,
      dialogFile: false,
      editorInstance: null,
      contentNow: "",
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 550,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: ``,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题
        // imageScaleEnabled:false,
        UEDITOR_HOME_URL: "./UEditor/",
        // UEDITOR_HOME_URL:
        //   process.env.NODE_ENV === "production"
        //     ? "/components/UEditor/"
        //     : "/UEditor/",
      },
    };
  },
  watch: {
    content() {
      this.contentNow = this.content;
    },
    contentNow() {
      // console.log(this.contentNow);
      this.$emit("change", this.contentNow);
    },
  },
  created() {
    this.myConfig.initialFrameHeight = this.height;
  },
  mounted() {
    this.contentNow = this.content;
    this.setUEditorConfig();
  },
  methods: {
    ready(editorInstance) {
      this.editorInstance = editorInstance;
      var body = editorInstance.iframe.contentWindow.document;     

      // 监听编辑区域滚动
      body.addEventListener("scroll", function () {
        // 取消选中图片
        var scaleDiv = document.getElementById("edui1_imagescale");
        if (scaleDiv) {
          scaleDiv.style.display = "none";
        }    
      });

    },
    // UEditor 配置添加
    setUEditorConfig() {
      const UEditorConfig = {
        uploadUrl: `${
          window.baseApi || process.env.VUE_APP_BASE_API
        }/common/upload`, // UEditor上传图片地址
        configUrl: `./UEditor/config.json`, // UEditor 获取配置接口地址 （若无此接口可使用下面的配置）
        headers: {
          Authorization: `Bearer ${getToken()}`,
        },
        imgConfig: {
          imageActionName: "uploadimage",
          imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
          imageCompressBorder: "1600",
          imageCompressEnable: true,
          imageFieldName: "file",
          imageInsertAlign: "none",
          imageMaxSize: "1048576",
          imagePathFormat: "",
          imageUrlPrefix: "",
        },
      };
      window.UEditorConfig = JSON.stringify(UEditorConfig);
    },
    addCustomButton(editorId) {
      const btnUiMap = {
        FileUploadBtn,
        videoUploadBtn,
      };
      this.customBtn.forEach((keyName) => {
        switch (keyName) {
          case "videoUploadBtn":
            btnUiMap[keyName](editorId, () => {
              this.handleVideoUploadBtn("videoUploadBtn");
            });
            break;
          case "FileUploadBtn":
            btnUiMap[keyName](editorId, () => {
              this.handleVideoUploadBtn("FileUploadBtn");
            });
            break;
          default:
            btnUiMap[keyName] && btnUiMap[keyName](editorId);
        }
      });
    },
    handleVideoUploadBtn(type) {
      console.log("jr", type);
      switch (type) {
        case "videoUploadBtn":
          this.dialogVideo = true;
          break;
        case "FileUploadBtn":
          this.dialogFile = true;
      }
    },
  },
};
</script>
```