SpringBoot 集成 CKEditor4 完整实例

最新推荐文章于 2024-05-09 16:49:32 发布

csdn_wangchen

最新推荐文章于 2024-05-09 16:49:32 发布

阅读量2.5k

点赞数

分类专栏： SpringBoot实战文章标签： CKEditor SpringBoot集成CKEditor4

本文链接：https://blog.csdn.net/csdn_wangchen/article/details/102588127

版权

SpringBoot实战专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SpringBoot 集成 CKEditor4 完整实例：

快速开始：

首先我们需要新建一个SpringBoot的项目，将CKEditor4集成进来。

下载CKEditor 标准版即可
将其解压放在SpringBoot项目的static目录下：
引入官方提供的例子: （修改正确的js地址）

edit.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

此时目录结构如下：

在这里插入图片描述

随后启动项目，可以在浏览器中看到效果：
在这里插入图片描述

上传图片：

此时的CKEditor是无法将我们本地的图片放上去的，需要我们做一些配置：

在解压后的ckeditor中修改config.js 文件：

config.uploadUrl = '/images/ckeditorUpload?command=QuickUpload&type=Files&responseType=json';
config.filebrowserUploadUrl = '/images/ckeditorUpload?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/images/ckeditorUpload?command=QuickUpload&type=Images';

后面配置的url 需要我们在controller 中自己处理图片上传的处理：

补充：

由于我们一般都是将SpringBoot项目打成jar包的，所以需要将文件放在本地服务器的其他地方，需要对此做一些修改，applicaion.yml

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 30MB
      max-request-size: 30MB
  resources:
    static-locations: /META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:E:/test

上面的配置是由于上传时请求信息太长，需要对此设置一下，否则在上传图片时会报错。

The field upload exceeds its maximum permitted size of 1048576 bytes.

下面的resources 配置就是本地静态资源文件的映射了，需要全部写上，否则会被覆盖。这样我们在 E:/test 下的文件可以直接像静态资源那样获取到了。

eg: 该目录下的1.jpg 可以通过http://localhost:8080/1.jpg 获取到

上传文件Controller处理：

在此处我们选择使用FileUils 来处理文件上传，添加依赖：

<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.6</version>
		</dependency>

CKEditor 需要我们上传成功之后返回json数据，将其封装成为一个对象：

/**
 * Created by wangchen on 2019/10/16 15:18
 * Description: 上传图片返回信息 CKEditor需要返回json信息
 * uploaded 在上传成功时可以设置为1 失败为 0
 * fileName 为文件名
 * url 为文件的实际访问路径
 */
@Data
public class ImageUploadVo {
    private int uploaded;
    private String fileName;
    private String url;
}

@RestController
@RequestMapping("/images")
@Slf4j
public class ImageUploadController {

    private final String imageFilePath = "E:/test/";

    /**
     * 上传图片
     *
     * @param file
     * @return
     */
    @ResponseBody
    @RequestMapping("/ckeditorUpload")
    public ImageUploadVo ckeditorUpload(@RequestParam("upload") MultipartFile file) throws Exception {
        log.info("开始上传图片");
        // 获取文件名
        String fileName = file.getOriginalFilename();
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + suffixName;
        log.info("上传文件文件名称：{}",newFileName);
        log.info("上传文件大小 ：{}" + file.getSize());
        FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath + newFileName));

        ImageUploadVo imageUploadVo = new ImageUploadVo();
        imageUploadVo.setUploaded(1);
        imageUploadVo.setFileName(newFileName);
        imageUploadVo.setUrl("http://localhost:8080/" + newFileName);
        return imageUploadVo;
    }
}

编辑edit.html 添加点击按钮查看效果：

<div align="center">
    <input type="button" onclick="buttonSubmit()" style="width: 60px;height: 35px;" value="提交表单"/>
</div>
<script>   
    function buttonSubmit() {
        var a = CKEDITOR.instances.editor1.getData();
        console.log(a);
    }
</script>

重新启动项目，直接复制一张图片，可以看到图片可以上传成功,回显也没有问题。

在这里插入图片描述

增强图像插件：

在上面中，我们已经实现了图片的上传以及回显，但是上传的图片无法拖动来改变位置。

CKEditor 4.3中引入的可选增强图像插件支持将图像插入编辑器内容。与CKEditor发行版中默认提供的经典Image插件相比，它提供以下功能：

它允许添加图像标题（当其位置更改时不会与图像分开）。
它具有小部件的所有优点，即您可以将图像及其标题视为一个实体，然后在整个编辑器内容区域中选择，删除或移动它。
它支持拖放以更改图像位置。
它使用内联样式或CSS类提供图像对齐，包括居中。
它包括轻松的**“单击和拖动”调整大小**。
它可以与您选择的文件管理器（例如CKFinder）集成，以支持图像上传和存储。

下面就试试这个插件：

首先需要下载增强型图像插件：增强型插件
解压之后，放到static/ckeditor/plugins下面

编辑 config.js 添加配置：

config.extraPlugins = 'image2,uploadimage';

重新启动项目，查看效果：

在这里插入图片描述

可以看到是现在我们可以简单的调整大小，并为图像添加标题。

源码地址：

https://github.com/handsome-owner/ckeditor-test-all.git

参考资料：

CKEditor官方文档

CKEditor实例

csdn_wangchen

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
SpringBoot 集成 CKEditor4 完整实例

SpringBoot 集成 CKEditor4 完整实例：快速开始：首先我们需要新建一个SpringBoot的项目，将CKEditor4集成进来。下载CKEditor 标准版即可将其解压放在SpringBoot项目的static目录下：引入官方提供的例子: （修改正确的js地址）edit.html:<!DOCTYPE html><html la...
复制链接

扫一扫

专栏目录