vue + UEditor 上传图片(回显),上传附件含token

最新推荐文章于 2024-03-29 19:08:26 发布

原创

最新推荐文章于 2024-03-29 19:08:26 发布 · 6.7k 阅读

标签

#富文本编辑器 #ueditor

本文档介绍了在Vue项目中集成已停更的UEditor，详细讲解了如何配置UEditor根路径，实现图片上传、回显及附件上传，并处理了请求时添加token和区分文件类型的细节。

@[TOC](vue + UEditor 上传图片(回显),上传附件含token)

背景介绍

本来一开始用的是TinyMCE的文本编辑器，但是谁还没遇到个无理的甲方爸爸呢，硬要换成已经不再维护好久的ueditor,后台不愿意改接口，只好硬着头皮上了

安装

参考vue-ueditor-wrap的官网安装就行
我用的vue2

npm i vue-ueditor-wrap@2.x
# 或者
yarn add vue-ueditor-wrap@2.x

下载ueditor，我下载的是ueditor-dev-1.5.0，不多说
下载解压后放在static文件夹下
在这里插入图片描述
这是我的页面结构，把富文本编辑器单独变成一个组件，接口以项目实际为准

<template>
  <div>
    <vue-ueditor-wrap
      v-model="content"
      :config="editorConfig"
      editor-id="editor"
    ></vue-ueditor-wrap>
      
<!--@ready="ueditorReady"  -->
  </div>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
   
   
  data() {
   
   
    return {
   
   
      editorConfig: {
   
   
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        serverUrl: "http://xxx.com/api/uploads", // 服务端地址
        imageActionUrl:"http://xxx.com/api/uploads",//图片上传地址
        fileActionUrl:"http://xxx.com/api/uploads",
        imageAllowFiles:[".png",".jpg",".jpeg",",gif"],//图片上传类型限制
        imageMaxSize:2048000,//图片限制大小2M以内
        fileAllowFiles:[".pdf","doc","docx","zip","rar"],//文件上传类型限制
      },
      content: "", //网页内容
    };
  },
  components: {
   
   
    VueUeditorWrap,
  },
  watch: {
   
   
    content(val) {
   
   
      this.$emit("onEditorChange", val);
    },
  },
};
</script>
<style lang="less" scoped>
</style>

配置ueditor根路径

不清楚的可以看ueditor官网配置在这里插入图片描述
接着把ueditor.all.js重命名为ueditor.all.min.js便于修改
这是我的接口结构，请求时需要头部加token，然后加上参数type区别文件类型，上传文件后，接口返回访问链接

在这里插入图片描述

修改图片并回显

首先修改ueditor.all.min.js
大概在8830行的位置

// core/loadconfig.js
  (function () {
   
   
    UE.Editor.prototype.loadServerConfig = function () {
   
   
      var me = this;
      setTimeout(function () {
   
   
        try {
   
   
          me.options.imageUrl &&
            me.setOpt(
              "serverUrl",
              me.options.imageUrl.replace(
                /^(.*[\/]).+([\.].+)$/,
                "$1controller$2"
              )
            );

          var configUrl = me.getActionUrl("serverUrl"),
          isJsonp = utils.isCrossDomainUrl(configUrl);
          console.log(isJsonp, 'isJsonp',configUrl)
          /* 发出ajax请求 */
          configUrl &&
            UE.ajax.request(configUrl, {
   
   
              method: 'POST',
              dataType: 'json',
              data: {
   
   },
              onsuccess: function (r) {
   
   
                try {
   
   
                  console.log