15. Spring Boot 2.x With TinyMCE Sample

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/hadues/article/details/102492921

这篇博文来讲解下Spring Boot 集成TinyMCE.

1.什么是TinyMCE?

TinyMCE 是一款优秀的富文本编辑器,博客园默认的富文本编辑器就是这个。

官网地址:https://www.tiny.cloud/

2. 关于价格

TinyMCE有免费版也有收费版本,具体详情如下:
在这里插入图片描述

3. Spring Boot 2.x 如何集成TinyMCE?

3.1 注册TinyMCE 账号获取API KEY

注册地址:https://www.tiny.cloud/auth/signup/

登录后查看API KEY

https://apps.tiny.cloud/my-account/key-manager/
在这里插入图片描述
点击进入可以看到API KEY
在这里插入图片描述

图中圈起来的就是API KEY

  • 配置可以访问的域名或IP地址,这里 由于本地测试,因此增加了127.0.0.1
    在这里插入图片描述

3.2 前端配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        <!-- 初始化富文本编辑器-->
        tinymce.init({
            selector: '#myTextArea',
        });
    </script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form action="post.do" method="post">
    <textarea id="myTextArea" name="myTextArea">Hello, World!</textarea>

    <button type="submit">保存</button>
</form>
</body>
</html>

no-api-key 要替换为自己申请的KEY

预览效果图如下:
在这里插入图片描述
点击保存,提交到后台。

3.2 后端配置

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * @author 星云
 * @功能
 * @date 10/10/2019 11:15 PM
 */
@Slf4j
@Controller
public class PostController {

    @PostMapping(value = "/post.do")
    public String post(@RequestParam(value = "myTextArea")String myTextArea){
        log.info(myTextArea);
        return "success";
    }
}

输出结果:

2019-10-10 23:33:57.879  INFO 12008 --- [nio-8080-exec-4] c.x.s.controller.PostController          : <p><strong>Hello, World!</strong></p>

4. 查看源码

查看当前项目源码

5. 参考资料

本篇完~

猜你喜欢

转载自blog.csdn.net/hadues/article/details/102492921