百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期个人网站源码word文档批量处理大师破解版
当前位置：网站首页 > 技术教程 > 正文

CKEditor 5 + SpringBoot实战(五):SpringBoot & Freemarker整合

csdh11 2024-12-25 10:53 3 浏览

在本系列的文章中，我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建，文件上传，SpringData JPA数据持久化，CKEditor5的安装，CKEditor图片上传，CKEditor插入视频，获取/设置CKEditor内容等。




项目源码

本系列文章的项目源码同步更新至码云 和 Github ，你可以任选其一下载源码到本地。项目地址如下：

  1. 码云：https://gitee.com/ramostear/CKEditor5-SpringBoot
  2. Github：https://github.com/ramostear/CKEditor5-SpringBoot

你也可以通过Git命令行工具下载项目源码，命令如下(二者任选其一)：

git clone https://gitee.com/ramostear/CKEditor5-SpringBoot.git
git clone https://github.com/ramostear/CKEditor5-SpringBoot.git


FreeMarker

Apache FreeMarker是一个基于Java语言开发的模板引擎，用于根据模板和不断变化的数据生成文本输出(例如：HTML网页，电子邮件，配置文件，源代码等)。FreeMarker模板使用FTL模板语言编写，这是一种简单的专用语言，在模板中，你专注于如何显示数据，在模板之外，你专注于呈现什么样的数据。



Maven 依赖

在SpringBoot项目中，使用FreeMarker是一件很容易的事情，首先我们需要导入FreeMarker的依赖包。打开pom.xml文件并添加如下配置：

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


FreeMarker配置

SpringBoot遵循约定优于配置的原则，在默认情况下，你只需要导入FreeMarker的依赖包即可在项目中使用它，无需再编写其他的配置代码。如果你还需要有其他额外的配置，例如模板的后缀名，模板存放路径等，则可以按照如下的方式进行配置。


ViewResolver

Spring MVC为我们提供了ViewResolver接口，该接口将视图名称映射到实际的视图，接下来，我们将创建一个FreeMarkerViewResolver实例，作为项目的视图解析器，并覆盖其中默认的配置参数。

打开上一章中创建的MvcConfiguration.java类，并在其中添加如下的方法：

@Bean
public FreeMarkerConfigurer freeMarkerConfigurer(){
    String[] templatePaths = {"classpath:/templates/","file:"+Consts.FILE_STORAGE_ROOT+"/themes/"};
    FreeMarkerConfigurer configurer = new FreeMarkerConfigurer();
    configurer.setTemplateLoaderPaths(templatePaths);
    return configurer;
}

在该方法中，我们关闭了视图解析器的缓存功能，模板的前缀为空，模板的后缀名为".html"。


FreeMarker模板路径配置

接下来，我们将设置FreeMarker模板的存放路径，该路径是指模板在Web上下文中的位置。在Spring Boot应用程序中，FreeMarker模板路径默认为"classpath:/templates/"。如果我们有多个模板路径，则可以按照如下的方法进行配置。

@Bean
public FreeMarkerConfigurer freeMarkerConfigurer(){
    String[] templatePaths = {"classpath:/templates/","file:"+Consts.FILE_STORAGE_ROOT+"/themes/"};
    FreeMarkerConfigurer configurer = new FreeMarkerConfigurer();
    configurer.setTemplateLoaderPaths(templatePaths);
    return configurer;
}

在该配置方法中，除了默认的"classpath:/templates/"路径外，我们还额外将磁盘的某个路径设置成了模板路径。如此配置后，视图解析器首先会在"/templates/"目录下查找模板文件，如未找到，则会跳转到“Constas.FILE_STORAGE_ROOT/themes/”目录中去查找。


Freemarker 模板

现在，我们可以在“/templates/”目录下使用Freemarker创建HTML模板。在本示例中，我们仅简单的输出一句话：“Hello CKEditor5”。当请求“/hello”url时，Spring将使用我们提供的模型(数据)处理模板。在模板中，我们使用表达式“${message}”来获取模型。

HelloController

package com.ramostear.ckeditor.controller;
?
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
?
@Controller
public class HelloController {
?
    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("message","Hello CKEditor5");
        return "hello";
    }
}
?

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CKEditor5</title>
    <style>
        .msg{
            width: 200px;
            height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <h2 class="msg">${message}</h2>
</body>
</html>

最后，启动应用程序并在浏览器中输入：“ http://localhost:8080/hello ”，然后观察页面输出。输出结果如下图：



本章小结

在本章中，主要介绍了如何在Spring Boot应用程序中集成FreeMarker。FreeMarker的功能不仅仅是文中所展示的内容，如果你需要查阅更多的信息，请访问FreeMarker官网：https://freemarker.apache.org/。在下一章节中，我将介绍CKEditor5的安装与初始化。


未经作者允许，请勿擅自转载，转载请注明文章作者和出处。


相关推荐

全新AI富文本编辑器 AiEditor 富文本编辑器实现

AiEditor是面向AI时代的新型富文本编辑器，兼容多种前端框架如Layui、Vue、React、Angular和Svelte，适用于PC和移动端。它提供了亮色和暗色主题，并且具备高...

CKEditor 5 + SpringBoot实战(五):SpringBoot &amp; Freemarker整合

在本系列的文章中，我将介绍如何在SpringBootApplication中使用CKEditor编辑器。介绍的内容包括基本环境的搭建，文件上传，SpringDataJPA数据持久化，CKEdit...

私有化的中文笔记工具，极空间Docker部署中文版『Trilium Notes』

一个私有化的中文笔记工具&个人知识库，极空间Docker部署中文版『TriliumNotes』哈喽小伙伴们好，我是Stark-C~...

比较好的网页里面的 html 编辑器 推荐

如果您正在寻找嵌入到网页中的HTML编辑器，以便用户可以直接在网页上编辑HTML内容，以下是几个备受推荐的：CKEditor：CKEditor是一个功能强大的、开源的富文本编辑器，可以嵌入到...

打造Flutter高性能富文本编辑器——协议篇

...

网页设计HTML零基础入门 html5网页设计教程

一、Html概述Html是HyperTextMark-upLanguage的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标...

所见即所得，网站页面的文本编辑器

所见即所得，不是很熟悉这个词吗？所见即所得代表什么，你看到的就是你得到这通常意味着一个编辑应用程序使用，以说明正在编辑的内容将完全一样的最终结果。与其他文本编辑器相比，“所见即所得”文本编辑器非常友...

推荐五个优秀的富文本编辑器 富文本编辑器app

富文本编辑器是一种可嵌入浏览器网页中，所见即所得的文本编辑器。对于许多从事前端开发的小伙伴来说并不算陌生，它的应用场景非常广泛，平时发个评论、写篇博客文章等都能见到它的身影。...

CKEditor5 + SpringBoot实战(二):SpringBoot 环境搭建

在本系列的文章中，我将介绍如何在SpringBootApplication中使用CKEditor编辑器。介绍的内容包括基本环境的搭建，文件上传，SpringDataJPA数据持久化，CKEdit...

分享一个AiEditor富文本编辑器，一款自带AI属性的文本编辑神器

引言最近天天写文章老是在记事本和各种公众号平台之间来回切换格式感觉挺麻烦的，今天搜索到了一个叫AiEditor的富文本编辑器，试用了一下感觉还不错，所以也想分享给大家试一下。它是一款开源的文本编辑器，...

Django后台管理系统(admin)的使用

Django自带的admin系统...

推荐13个又热门又实用的Vue开源宝典库

大家好，我是Echa。最近有不少的老铁们私信我，怎么学Vue,有啥秘诀吗？其实没啥秘诀的。今天来推荐13个又热门又实用的Vue.js宝典库，用心看完跟着这Vue宝典来实战操作，不出半个月，开发项...

主流富文本编辑器推荐,网站编辑器排名不分先后及特点

富文本编辑器（RichTextEditor，简称RTE）是一种提供类似于MicrosoftWord编辑功能的工具，在后台处理文章编辑时，深受不会编写HTML但又需要设置各种文本格式的用户喜爱，但...

为何强烈推荐基于 CKEditor 的 AlloyEditor 富文本编辑器?

大家好，很高兴又见面了，我是"高级前端?进阶...

CKEditor 5 v22发布，URL插入图像和新列表样式

CKEditor5v22.0.0发布了。此版本能够通过URL插入图像，带来了新的列表样式和Markdown插件。导出到PDF和Word的功能已稳定发布，并且即将推出新的分页功能。...

一周热门
最近发表
标签列表