工作小总结

springboot集成ueditor富文本编辑器(不需修改ueditor源码)

背景最近工作需要重新搭建公司网站,其中需要使用富文本编辑器,货比三家,最后选择了百度团队的UEditor。项目框架为springboot,所以涉及到springboot集成ueditor,动手之前就听说会有不少坑...上手了发现,emm,果不其然...(主要是上传图片部分)具体的集成步骤如下,希望这可以帮到看文章的你。(本人使用的是ueditor-JSP版)本篇为在不修改UEditor源码的情况下

背景

最近工作需要重新搭建公司网站,其中需要使用富文本编辑器,货比三家,最后选择了百度团队的UEditor。项目框架为springboot,所以涉及到springboot集成ueditor,动手之前就听说会有不少坑...上手了发现,emm,果不其然...(主要是上传图片部分)
具体的集成步骤如下,希望这可以帮到看文章的你。
(本人使用的是ueditor-JSP版)

本篇为在不修改UEditor源码的情况下集成的UEditor,如果需要修改UEditor源码的请戳这里
☞springboot集成ueditor富文本编辑器(修改ueditor源码)[推荐]

相关源码下载

集成步骤:

  • 1 新建springboot项目,添加web和thymeleaf依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <!--修改thymeleaf版本-->
        <thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.1.0</thymeleaf-layout-dialect.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>
  • 2 下载对应的UEditor源码(完整版或者JSP版本均可):
    下载完成后解压至项目的resources/static/目录下,并将源码中的index.html复制到templates中,并修改其中引入js的src

   <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

将源码拷贝至static目录下.png

  • 3 创建UeditorContorller类,写跳转主页面方法

package com.example.demo.Controller;
import ...
@Controller
public class UeditorController {
    @

原创不易,完成人机校验,阅读全文

相关推荐