SpringBoot整合UEditor

最新推荐文章于 2024-03-18 08:00:00 发布
最新推荐文章于 2024-03-18 08:00:00 发布
阅读量521 收藏 2
点赞数
分类专栏： java SpringBoot 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40386113/article/details/113615876
版权

在UEditor官网下载源码的时候，下载master分支的代码，因为在master分支可以查到不同语言的后端代码。如果是Java语言开发，后端代码选择jsp目录下的。

源码目录结构，建议查看UEditor官方文档http://fex.baidu.com/ueditor/#start-dir

我们使用SpringBoot框架，配备Thymeleaf模板引擎来使用UEditor

一、添加UEditor必须使用到的依赖

        <!--UEditor所需依赖-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>
        <!--该json依赖在引入uedit的时候必不可少-->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20171018</version>
        </dependency>

二、从官网下载源码并解压到项目，注意config.json需要拷贝到resources跟路径下。

前端需要拷贝的文件夹和文件有dialogs、lang、themes、third-party、ueditor.all.js、ueditor.config.js、ueditor.parse.js，其目录如下，注意在根目录下新建一个文件夹，名称必须是ueditor，然后放置这些文件

对于后端部分

三、通过UEditorController类修改UEditor首页访问地址

四、根据第三步设定的首页名称，新建首页面uedit.html，其内容如下

<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

    <style type="text/css">
        div{
            width:100%;
        }
    </style>
</head>
<body>
<div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="btns">
    <div>
        <button onclick="getAllHtml()">获得整个html的内容</button>
        <button onclick="getContent()">获得内容</button>
        <button onclick="setContent()">写入内容</button>
        <button onclick="setContent(true)">追加内容</button>
        <button onclick="getContentTxt()">获得纯文本</button>
        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
        <button onclick="hasContent()">判断是否有内容</button>
        <button onclick="setFocus()">使编辑器获得焦点</button>
        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
        <button onmousedown="setblur(event)" >编辑器失去焦点</button>

    </div>
    <div>
        <button onclick="getText()">获得当前选中的文本</button>
        <button onclick="insertHtml()">插入给定的内容</button>
        <button id="enable" onclick="setEnabled()">可以编辑</button>
        <button onclick="setDisabled()">不可编辑</button>
        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
    </div>

    <div>
        <button onclick="getLocalData()" >获取草稿箱内容</button>
        <button onclick="clearLocalData()" >清空草稿箱</button>
    </div>

</div>
<div>
    <button onclick="createEditor()">
        创建编辑器</button>
    <button onclick="deleteEditor()">
        删除编辑器</button>
</div>

<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
</script>
</body>
</html>

五、运行项目，通过路径访问UEditor页面,成功如下

六、修改配置文件。如上所述运行的项目，图片上传不可用，需要修改配置文件

1、修改config.json文件

2、修改application.yml文件

修改后的项目图片上传功能可正常使用

 

one_smail
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Spring boot 整合Ueditor(百度编辑器) 简洁版(图片上传)
cocosum
10-19 1011
1、先给大家拜个早年！ 看个效果图: 2、去百度官网下载UEditor。机票 3、下载下来是这样的: # config.json 配置文件（需要引用） # controller.jsp springboot默认不支持jsp的，所以在这里咱也不用。 # ueditor.config.js 这个需要，直接引入页面就行了。一共引入三个就行了 <!--...
SpringBoot 整合 UEditor 详细教程（一）| 整合教程
慌途L
09-02 6146
SpringBoot 整合 UEditor 详细教程（一）| 整合教程 官方文档：http://fex.baidu.com/ueditor/. 项目地址：https://github.com/fex-team/ueditor. 官方源码zip包（UTF-8格式）：ueditor-1.4.3.3.zip（github下载过慢） 链接：https://pan.baidu.com/s/1btFLz8PVXLot3CjL2qEiQQ 提取码：mja2 一、下载源码包 1.由于官网下载过慢，我在上面贴了百度云
很详细的SpringBoot整合UEditor教程
热门推荐
小宝的博客
04-10 4万+
UEditor只提供JSP版本的后端入口代码。但提供了项目源码，因此可以根据业务需求修改源代码。 此处使用了SprngBoot框架，配备了Thymeleaf模板引擎，所以没有必要再添加jsp来兼容UEditor，可通过修改源码满足需要。下面是详细教程。
人人开源ueditor富文本+SpringBoot后端，配置问题解决
最新发布
m0_59799878的博客
03-18 1876
这里其他的不说，其实最主要的就是跨域警告和重写官方代码，整体步骤就是前端的ueditor配置后端得路由，后端把跨域拦截器解决，然后读取config.json文件，接着就是重写ueditor代码就完全解决了（注意那个老哥的代码包名和官方的一模一样）。t=N7T8。
springboot整合Ueditor的三种方式
weixin_56172906的博客
06-24 2149
最近前端页面需要使用百度的Ueditor富文本编辑器，本来以为只需要前端适配就可以了，没想到Ueditor需要使用一个服务器统一请求接口，各种百度，历时一天终于弄懂了是怎么一回事，下面是我整了的三种整合的方式，从使用Ueditor的后端代码，到引入Ueditor依赖，到最后完全接管Ueditor后端，都是验证可行的。...
Maven依赖方式引用UEditor的jar包
Gblfy_Blog
01-04 2620
使用UEditor时候，如果不引入相关jar包，controller.jsp就会报找不到类的错误，一些功能也无法实现。但是maven中央仓库没有这两个相关的jar包，用直接导入的方式又显得莫名其妙，那么怎么通过maven方式依赖呢？ 1、首先把UEditor-for-aliyun-OSS-v1.2.1-beta.jar、json-for-aliyun-OSS-1.2.1.jar两个jar包放在we...
SpringBoot整合UEditor富文本编辑器
05-07
springboot整合ueditor，由于项目是springcloud分布式项目,注册中心和其他服务未上传,下载的同学看代码路径和配置即可.资料参考地址: https://blog.csdn.net/a1053765496/article/details/105965560
详解springboot整合ueditor踩过的坑
08-19
主要介绍了详解springboot整合ueditor踩过的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
springboot整合ueditor源码
08-03
springboot和ueditor的整合，下载下来只需要修改index.html中的地址就可以。具体搭建的步骤在：https://www.jianshu.com/p/231e83c13610 中，大家可以参考。
springboot整合UEditor亲测有效.zip
06-19
https://blog.csdn.net/Lao_Wu66/article/details/92829954 博客有坑，小白请下载
SpringBoot整合Ueditor和kityformula
10-11
SpringBoot整合Ueditor和kityformula，参考博客：https://hcshow.blog.csdn.net/article/details/109011620
SpringBoot之使用Ueditor
qq_41343166的博客
03-11 288
1.下载Ueditor [http://ueditor.baidu.com/website/] 2.解压文件： 3.导入文件 在spring的static目录下创建ueditor文件，把解压的文件全部复制到这个文件下。 如图： 4.导入jar <dependency> <groupId>commons-fileupload</groupId> ...
Spring Boot使用UEditor
wokuailewozihao的专栏
04-15 1389
1、将ueditor放入静态资源 注意图中红色剪头为重要配置， 其中的controller.jsp是后台统一入口（获取config.json和上传文件等），由于被放入了静态资源，无法正常访问和执行，所以需要我们自己写方法覆盖掉它， config.json在前端ue首次加载时会请求获取，里面都是一些关于上传文件和回显的配置，由于我们决定覆盖掉controller.jsp中的方法，所以con...
springboot+vue整合百度的Ueditor（保姆级教程）
Jamie__Zhang的博客
07-15 2526
前言 最近应上级要求，添加一个富文本编辑器，百度的Ueditor（主角来了）；划重点2016年就停更了！ 废话不多说，直接开始操作吧。 ！！！建议看的时候仔细一点，因为很可能遗漏了某个地方就很抓狂！！！ 相信你看完肯定会有收获的 1、先去GitHub官网上下载Ueditor(点这里) 下载完成之后解压出来，一会要复制文件的 注意:我这里直接开始导入操作，默认你会maven,vue,并且会使用IDEA工具 2、再下载一个jsp版本（我是用java写得） 此处也可以不下载，但是怕有童鞋整不明白，所以还是
史上最详细springboot vue UEditor整合（包括遇到的各种坑）
kshon的博客
10-22 7245
Vue中引入UEditor看这篇教程https://blog.csdn.net/kshon/article/details/102667318 接下来说说springboot中配置UEditor遇到的各种坑 1、将UEditor中目录下的config.json文件复制resource下 2、在Vue中配置后端接口 Ueditor初始化时会向serverUrl发送一条请求，格式如下，...
springboot整合ueditor百度富文本编辑器详细教程
qq_43737121的博客
10-20 752
第一步：到官方下载ueditorhttps://ueditor.baidu.com/website/download.html（ueditor下载地址） 解压，放到项目目录static下 第二步：引入到前端页面中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script...
ueditor编辑器的使用
qq_51447436的博客
03-11 7867
ueditor编辑器的使用
Ueditor 百度强大富文本Springboot 项目集成使用(包含上传文件和上传图片的功能使用)简单易懂，举一反三
zhang19age_的博客
07-27 2835
到这里已经将代码层面改好啦，然后呢就是最恶心的环节啦，那就是他们的源码里参了一点点西东，那就是BUG，那就是在这个jar包中的 getConfigPath() 方法，这里的获取config路径是不对的，我们需要改一下这个代码，可以使用修改源码或者重写来修改这里的源码,重写就是依靠java 的类加载器如果本地有就去加载本地的类，如果本地没有就去加载其他的，这里我是修改源码实现的。其实就是换了获取config.json的路径变为了动态，下载了之后换掉lib下的包。实体类 uEditorFile。
springboot 整合ueditor
10-31
SpringBoot 整合 UEditor 可以通过引入 UEditor 的 jar 包和配置相关参数来实现。具体步骤如下： 1. 在 pom.xml 文件中引入 UEditor 的 jar 包。 2. 在 application.properties 文件中配置 UEditor 的相关参数，例如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

one_smail

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值