SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器

一般涉及到后台管理系统,就少不了富文本编辑器,这个可以图文视频混排高级工具,笔者通过对比,发现目前市场上最好的三方库还当属百度的 ueditor

近年来 SpringBoot 框架可谓越来越火,可是笔者发现 ueditor 只提供了对于 JSP 的版本,网上能找到很多继承的案列,但是大部分都是修改源码,或者

自己去实现上传文件的接口这使得一些功能不能被使用或者需要花大量的事件去实现上传文件的方法,通过权衡,还是 springboot + jsp + ueditor 的方式最简单

虽然 jsp 不是 springboot 官方推荐的模板引擎,但是 jsp 毕竟活跃了这么多年,很多三方库都是基于它的,所以现在就开始吧!

1,创建一个 jar 类型的 springboot 2.0 以上版本的项目(网上流传的只有war包才能运行 jsp 的纯属谣言)

2,在 pom 文件中添加如下

<?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.hwq</groupId>
    <artifactId>jsp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>jsp</name>
    <description>整合 JSP 页面</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.6.RELEASE</version>
        <relativePath/>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
    </properties>

    <dependencies>
        <!-- WEB 开发组件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- Servlet 依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <!-- JSTL 依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!-- TomCat 外部依赖 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!-- 百度文本编辑器后台部分 -->
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>
        <!-- junit 测试依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <!-- 目前插件的版本必须选择 1.4.2.RELEASE,否则打包之后会出现 JSP 找不到 -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>1.4.2.RELEASE</version>
            </plugin>
        </plugins>
        <resources>
            <!-- 表示将 webapp 目录下的内容打包到 META-INF/resources 目录下 -->
            <resource>
                <directory>src/main/webapp</directory>
                <targetPath>META-INF/resources</targetPath>
                <includes>
                    <include>**/**</include>
                </includes>
            </resource>
            <!-- 表示将 resources 目录下的内容打包到类路径目录下 -->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/**</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>
</project>

3,dependencies 中是一些基本依赖,JSP依赖和 Ueditor 的依赖,build 中的是打包配置,如果没有必要,直接复制就行

4,在 src/main 目录下创建 webapp 目录,在 webapp 目录下随便写一个 jsp 页面

5,在配置文件中添加如下配置,第一个配置项就是你 jsp 页面所存放的相对 webapp 的位置

server.port=80

(如果不想要控制器中转,只是想直接访问 jsp 页面,可以省略下面的配置)

spring.mvc.view.prefix=/

spring.mvc.view.suffix=.jsp

6,书写项目启动类

package com.hwq.jsp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

/**
 * 想要集成 JSP 页面,启动类需要继承 SpringBootServletInitializer
 * 需要重写 configure 方法
 * 测试阶段要把启动方式的工作环境调成当前模块,否则多模块下回找不到视图页面
 */
@SpringBootApplication
public class JspApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(JspApplication.class);
    }

    public static void main(String[] args) {
        SpringApplication.run(JspApplication.class, args);
    }
}

7,如果使用的是 idea 编辑器,在同时打开多个模块的时候,会出现路径找不到的情况,这时候我们需要将工作路径指向模块路径

8,编辑启动类

 

9,如下图,选择项目的启动类,修改工作目录为 模块路径

10,保存之后启动,在地址栏 输入 localhost:8080/index.jsp 就能访问到刚刚书写的 jsp 页面了

11,做到这里,我们就基本整合完毕了,接下来去官网下载 jsp 版本的 ueditor

12,解压之后,将压缩包解压并重命名为 ueditor,并将这个目录方法 webapp 路径下

13,将 ueditor 目录里面的 index.html 复制到webapp下(注意修改 js 的引入路径)

14,启动项目,我们在地址栏输入 localhost 就能访问到 ueditor 的页面了

15,做到这里,我们基本就完成了 ueditor 整个项目的整合,但是由于最后要打成 jar ,我们可以发现,编辑器的文件是保存在

        ueditor/jsp/upload/ 目录下的,打成 jar 包之后无法在上传到这个路径,我们需要修改这个路径

  

16,接下来使用 idea 的功能打包,双击如下这个选项,等待

原文地址:https://www.cnblogs.com/lovling/p/9809373.html

时间: 2024-10-16 04:15:03

SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器的相关文章

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

WEB项目中使用UEditor(富文本编辑器)

Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文本编辑器的使用哈!觉得写得不错的请点赞哈,有建议欢迎提哈!^V^ 下载链接:http://ueditor.baidu.com/website/download.html 具体的使用请看官网:http://ueditor.baidu.com/website/index.html 下载富文本编辑器后,我

django之百度Ueditor富文本编辑器后台集成

Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因为百度富文本编辑器Ueditor没有对python的支持 步骤1: 在官网下载Ueditor的任意版本代码:http://ueditor.baidu.com/website/download.html#ueditor 步骤2: 将下载的代码放入到 django 项目中 步骤3:前端引用 在前端HTM

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

springMVC -- 整合UEditor(富文本编辑器)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 1.编写controller 如下(该接口是ueditor前后台交互的统一路径) : package com.test.dcdp.controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet

springMVC -- 对接UEditor(富文本编辑器)

工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方式是直接修改源码,步骤如下: 1.编写controller 如下(该接口是ueditor前后台交互的统一路径) : package com.test.dcdp.controller; import java.io.IOException; import java.io.PrintWriter; im

ASP.NET MVC 中使用 UEditor 富文本编辑器

在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是-- 好吧,咱得搞专业点.来个传说中的富文本编辑器,度娘了一下,发现 KISSY Editor 和 UEditor 貌似比较简单的样子,既然这样就用百度的 UEditor 吧,到这里下载最新的.NET版. 解压后,将默认目录名称改为 ueditor 然后复制到项目的 Content 目录中,大概就像下图中的样子 打开~/Views/P

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑定.之所以有这个 repo 的原因是: ?1.UEditor 依然是国内使用频率极高的所见即所得编辑器而 Vue 又有着广泛的使用,所以将两者结合使用,是很多 Vue 项目开发者的切实需求. ?2.目前没有发现满足这种需求,而使用又很方便的 repo.有的可能也只是简单的暴露一个 UEditor 的