菜单 搜索
首页 前端知识 Vue集成UEditor puls富文本编辑器

Vue集成UEditor puls富文本编辑器

2024-05-03 18:05:54 前端知识 前端哥 820 742 我要收藏

一、前端vue配置

（系统采用ruoyi-vue框架。）（源码文末自己拿）
1、下载代码和官方相关说明：https://gitee.com/modstart-lib/ueditor-plus/tree/master
2、解压压缩包，如下图
在这里插入图片描述
3、拿到dist文件夹的内容，重命名为UEditor，并将其复制到vue项目的public下，如图
在这里插入图片描述
4、安装UEditor插件 npm i vue-ueditor-wrap
5、全局挂载组件或引用组件（二选一）
全局挂载组件：找到main.js 加入一下代码：

import VueUeditorWrap from 'vue-ueditor-wrap';
Vue.component('VueUeditorWrap', VueUeditorWrap)

如图：
在这里插入图片描述
引用组件：在具体用到富文本的页面加入一下代码，

import VueUeditorWrap from 'vue-ueditor-wrap';
components:{
	  //VueUeditorWrapA
	  //**更正代码231109**
	  VueUeditorWrap
  }

具体位置如图：
在这里插入图片描述
6、使用富文本编辑器，在具体位置引用

<vue-ueditor-wrap v-model="form.content"
		  editor-id="editor"
		  :config="editorConfig"
		  :editorDependencies="['ueditor.config.js','ueditor.all.js']"
		  style="height:500px;"/>

在这里插入图片描述

其中在data里定义editorConfig（注意UEDITOR_HOME_URL的写法）：
1、增加一行 UEDITOR_CORS_URL: ‘/UEditor/’, 不然部分组件点击会跳出404页面
2、serverUrl需后端提供接口，实现相关上传功能。

editorConfig: {
		  //serverUrl: process.env.VUE_APP_BASE_API + "/config"',
		  //**更正代码231109**
		  serverUrl: process.env.VUE_APP_BASE_API + "/config",
		  //前端资源
		  UEDITOR_HOME_URL: '/UEditor/',
		  UEDITOR_CORS_URL: '/UEditor/',
		  zIndex: 99999,//设置z轴顺序值，避免工具栏下拉组件被遮挡
	  },

至此前端基本配置完成，运行效果如图，此时上传相关功能不可用，需配置后端内容，往下看。
在这里插入图片描述

二、后端java配置

1、引入依赖：

<dependency>
    <groupId>com.blingblingbang</groupId>
    <artifactId>ueditor</artifactId>
    <version>1.1.2</version>
</dependency>

2、在resource下添加config文件夹并加入config.json文件
在这里插入图片描述
config.json内容：
imageUrlPrefix（图片上传-图片访问路径前缀）、
scrawlUrlPrefix（涂鸦图片-图片访问路径前缀）、
catcherUrlPrefix（远程图片-图片访问路径前缀）、
videoUrlPrefix（上传视频-视频访问路径前缀）
注意填写内容（即前端运行的ip加端口号）,如图向后台发起的请求连接，是什么就填什么。
本质上填的是java后台地址（看自己项目的后台地址是什么），为了实现图片或者文件能正常请求展示。
我这里填写的是：http://localhost:81/dev-api/ 代码处理后指向的是后台地址http://localhost:82，
因此可以直接填http://localhost:82，
但避免后端地址暴露就采用了前面这种写法，
打包后地址变为为http://localhost:81/prod-api/ 会通过nginx处理指向http://localhost:82
注意要在json里的注释写法：使用/**/注释，不允许//，不然前端请求到的内容会报错
在这里插入图片描述

{
  /* 上传图片配置项 */
  "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
  "imageFieldName": "upfile", /* 提交的图片表单名称 */
  "imageMaxSize": 2048000, /* 上传大小限制，单位B */
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
  "imageCompressEnable": true, /* 是否压缩图片,默认是true */
  "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
  "imageInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageUrlPrefix": "http://localhost:81/dev-api/", /* 图片访问路径前缀 */
  "imagePathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
  /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
  /* {time} 会替换成时间戳 */                                /* {yyyy} 会替换成四位年份 */
  /* {yy} 会替换成两位年份 */
  /* {mm} 会替换成两位月份 */
  /* {dd} 会替换成两位日期 */
  /* {hh} 会替换成两位小时 */
  /* {ii} 会替换成两位分钟 */
  /* {ss} 会替换成两位秒 */
  /* 非法字符 \ : * ? " < > | */
  /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
  /* 涂鸦图片上传配置项 */
  "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */
  "scrawlFieldName": "upfile", /* 提交的图片表单名称 */
  "scrawlPathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */
  "scrawlUrlPrefix": "", /* 图片访问路径前缀 */
  "scrawlInsertAlign": "none",    /* 截图工具上传 */
  "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */
  "snapscreenPathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */
  "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */
  /* 抓取远程图片配置 */
  "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
  "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */
  "catcherFieldName": "source", /* 提交的图片列表表单名称 */
  "catcherPathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "catcherUrlPrefix": "", /* 图片访问路径前缀 */
  "catcherMaxSize": 2048000, /* 上传大小限制，单位B */
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
  /* 上传视频配置 */
  "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
  "videoFieldName": "upfile", /* 提交的视频表单名称 */
  "videoPathFormat": "video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "videoUrlPrefix": "http://localhost:81/dev-api/", /* 视频访问路径前缀 */
  "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
  "videoAllowFiles": [        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
  /* 上传文件配置 */
  "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
  "fileFieldName": "upfile", /* 提交的文件表单名称 */
  "filePathFormat": "file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
  "fileUrlPrefix": "", /* 文件访问路径前缀 */
  "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
  "fileAllowFiles": [        ".png", ".jpg", ".jpeg", ".gif", ".bmp",        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"    ], /* 上传文件格式显示 */
  /* 列出指定目录下的图片 */
  "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
  "imageManagerListPath": "image/", /* 指定要列出图片的目录 */
  "imageManagerListSize": 20, /* 每次列出文件数量 */
  "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
  "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
  "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */
  /* 列出指定目录下的文件 */
  "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
  "fileManagerListPath": "file/", /* 指定要列出文件的目录 */
  "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
  "fileManagerListSize": 20, /* 每次列出文件数量 */
  "fileManagerAllowFiles": [        ".png", ".jpg", ".jpeg", ".gif", ".bmp",        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"    ] /* 列出的文件类型 */
}

3、新增UeditorController.java，并放开“/config”接口，使该接口不需要鉴权认证，前文的serverUrl需要配置该接口。

import com.alibaba.fastjson2.JSON;
import com.baidu.ueditor.ActionEnter;
import com.officialweb.common.config.RuoYiConfig;
import com.officialweb.common.utils.file.FileUploadUtils;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

@RestController
public class UeditorController {

    //配置ueditor后端上传接口的验证
    @RequestMapping("/config")
    public String config(HttpServletRequest request, HttpServletResponse response, String action, MultipartFile[] upfile) throws IOException {
         //获取配置文件json内容返回给前端
        if (action.equals("config")) {
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            //注意path不能含有中文路径,确认该path能指向config.json
            String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "config";
            System.out.println("path = " + path);
            PrintWriter printWriter = response.getWriter();
            printWriter.write(new ActionEnter(request, path).exec());
            printWriter.flush();
            printWriter.close();
        } 
        //上传图片
        else if (action.equals("uploadimage")) {
            Map<String, Object> result = new HashMap<String, Object>();
            for (MultipartFile multipartFile : upfile) {
                //调用系统写好的文件上传方法，并返回给前端上传后的文件路径，组件需要拼接回显
                String upload = FileUploadUtils.upload(RuoYiConfig.getUploadPath(),multipartFile);
                System.out.println("upload = " + upload);
                System.out.println("upload.sub= " + upload.substring(upload.lastIndexOf("/")));
                result.put("title", upload.substring(upload.lastIndexOf("/")+1));
                result.put("original", multipartFile.getOriginalFilename());
                result.put("state", "SUCCESS");
                result.put("url", upload);
                String jStr = JSON.toJSONString(result);
                return jStr;
            }
            return null;
        }
        //上传视频
        else if(action.equals("uploadvideo")){
            Map<String, Object> result = new HashMap<String, Object>();
            for (MultipartFile multipartFile : upfile) {
                String upload = FileUploadUtils.upload(RuoYiConfig.getUploadPath(),multipartFile);
                System.out.println("upload = " + upload);
                System.out.println("upload.sub = " + upload.substring(upload.lastIndexOf("/")));
                result.put("title", upload.substring(upload.lastIndexOf("/")+1));
                result.put("original", multipartFile.getOriginalFilename());
                result.put("state", "SUCCESS");
                result.put("url", upload);
                String jStr = JSON.toJSONString(result);
                return jStr;
            }
        }else{
            Map<String, Object> result = new HashMap<String, Object>();
            for (MultipartFile multipartFile : upfile) {
                String upload = FileUploadUtils.upload(RuoYiConfig.getUploadPath(),multipartFile);
                System.out.println("upload = " + upload);
                System.out.println("upload.sub= " + upload.substring(upload.lastIndexOf("/")));
                result.put("title", upload.substring(upload.lastIndexOf("/")+1));
                result.put("original", multipartFile.getOriginalFilename());
                result.put("state", "SUCCESS");
                result.put("url", upload);
                String jStr = JSON.toJSONString(result);
                return jStr;
            }
        }
        return null;
    }
}

至此结束后端配置。

三、其他补充

一、单图上传实现的代码逻辑分析
（如图）
在这里插入图片描述
代码逻辑：
1、刷新页面后，打开编辑器，向后台获取配置信息
在这里插入图片描述
后台接口代码，判断参数，获取config.json数据返回给前端：
在这里插入图片描述
图片的路径前缀，前文有说过：
在这里插入图片描述

2、点击单图上传
前端代码逻辑：
在这里插入图片描述
页面效果：
请求接口，返回url，就是上图的data.url
在这里插入图片描述
拼接成完整路径，并插入内容
在这里插入图片描述
至此单图上传的整个逻辑实现完成。

二、其他上传待后续有时间研究，但整体逻辑应该和单图差不多。

四、常见问题

1、确保所圈的三个接口返回内容正常，没有报错
在这里插入图片描述
2、前两个是涉及前端页面加载的关键，下图两个url写法造成的，要适配好你的前端框架的路径指向UEditor内容
在这里插入图片描述

3、第三个接口就是涉及的上传相关功能，请求java相关配置的，需要确保serverUrl的接口能正常访问到后台

五、源码

代码位置可以根据文章里的关键字搜索，项目运行启动方式参考ruoyi-vue的说明。源码不会运行或者运行不起来了，建议还是跟着文章步骤集成，有问题和其他建议可以评论或者私信。

链接：https://pan.baidu.com/s/1tddxN-4yM2ZHoPEyHxpRBw?pwd=pv3i
提取码：pv3i

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6854.html
标签
百度集成学习
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

flutter 使用FlutterJsonBeanFactory/FlutterJsonToDart工具遇到的问题

2024-05-09 11:05:04

JSONArray操作汇总,排序,筛选,分组

2024-05-09 11:05:04

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

MySql中使用JSON_TABLE 函数来实现json类型的数据查询

2024-05-09 11:05:02

可视化JSON数据工具推荐：JSON Viewer Pro和JSONGrid

2024-05-09 11:05:02

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:01

从 JSON 转 Java 实体的多种方法详解

2024-05-09 11:05:01

解决微信小程序报[ app.json 文件内容错误] app.json: app.json 未找到，未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译

2024-05-09 11:05:58

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
1

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
2

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
3

UE4.27支持HTML5

2024-05-07 13:05:261000
4

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
5

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
6

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
7

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
8

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
9

移动端css布局大全

2024-02-06 15:02:421000
10

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！