springboot项目中使用 Froala Editor 3,参考官网文档:https://www.froala.com/wysiwyg-editor/docs/overview

下载文件后,引入css和js

<link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>

在页面中加入div

<div id="example"></div>

然后在页面总初始化:

<script type="text/javascript">
var editor = new FroalaEditor('#example',{
alwaysBlank: true,
language: 'zh_cn',
plainPaste: true,
imageButtons: ["floatImageLeft", "floatImageNone", "floatImageRight", "linkImage", "replaceImage", "removeImage"],
allowedImageTypes: ["jpeg", "jpg", "png", "gif"],
imageUploadURL: '../sys/oss/upload',
imageUploadParams: {id: "edit"},
imagesLoadURL: '../sys/oss/queryAll'
});
</script>

这样,页面上就能展示富文本了:

在提交富文本内容到数据库时,参考文档::https://www.froala.com/wysiwyg-editor/docs/methods#html.get

var editor = new FroalaEditor('.selector', {}, function () {
// Call the method inside the initialized event.
  editor.html.wrap(false, true, false);//包装表格处理 temp,tables,blockquote
  editor.html.get(true);//获取文本内容
})

然后将文本提交到后台,这时传递给后台的文本中带有被转义的字符,需要做特殊处理:

String content = newContent.replace("& lt;","<").replace("& gt;",">");

然后再做反转义处理,引入

<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-text</artifactId>
<version>1.6</version>
</dependency>
 content = StringEscapeUtils.unescapeHtml4(content);//反转义

这样就能正常保存到数据库了。

springboot 整合 Froala Editor 3的更多相关文章

  1. SpringBoot(七):SpringBoot整合Swagger2

    原文地址:https://blog.csdn.net/saytime/article/details/74937664 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文 ...

  2. SpringBoot整合Swagger2

    相信各位在公司写API文档数量应该不少,当然如果你还处在自己一个人开发前后台的年代,当我没说,如今为了前后台更好的对接,还是为了以后交接方便,都有要求写API文档. 手写Api文档的几个痛点: 文档需 ...

  3. SpringBoot整合Swagger和Actuator

    前言 本篇文章主要介绍的是SpringBoot整合Swagger(API文档生成框架)和SpringBoot整合Actuator(项目监控)使用教程. SpringBoot整合Swagger 说明:如 ...

  4. springboot 整合Swagger2的使用

    Swagger2相较于传统Api文档的优点 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文档更新交流不及时. 接口返回结果不明确 不能直接在线测试接口,通常需要使用工 ...

  5. Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)

    一.概述 网上有很多关于Eclipse.IDEA等IDE插件通过拖拽的方式来画工作流程图,个人觉得还是不够好,所以花点时间研究了一下Activiti在线设计器,并与SpringBoot整合. 二.实现 ...

  6. SpringBoot整合Shiro权限框架实战

    什么是ACL和RBAC ACL Access Control list:访问控制列表 优点:简单易用,开发便捷 缺点:用户和权限直接挂钩,导致在授予时的复杂性,比较分散,不便于管理 例子:常见的文件系 ...

  7. spring-boot整合mybatis(1)

    sprig-boot是一个微服务架构,加快了spring工程快速开发,以及简便了配置.接下来开始spring-boot与mybatis的整合. 1.创建一个maven工程命名为spring-boot- ...

  8. SpringBoot整合Mybatis之项目结构、数据源

    已经有好些日子没有总结了,不是变懒了,而是我一直在奋力学习springboot的路上,现在也算是完成了第一阶段的学习,今天给各位总结总结. 之前在网上找过不少关于springboot的教程,都是一些比 ...

  9. springboot整合mq接收消息队列

    继上篇springboot整合mq发送消息队列 本篇主要在上篇基础上进行activiemq消息队列的接收springboot整合mq发送消息队列 第一步:新建marven项目,配置pom文件 < ...

随机推荐

  1. Oracle中日期作为条件的查询

    1.范围日期的查询: select * from goods where g_time betweento_date('2018/12/26 10:01:59','yyyy-MM-dd hh:mi:s ...

  2. 解决VS2010自带的C/C++编译器CL找不到mspdb100.dll的问题

    https://www.cnblogs.com/dudu/archive/2011/05/21/2053104.html 更好解决方法是在命令行中运行vsvars32.bat: "C:\Pr ...

  3. javaweb上传文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 首先我们需要了解的是上传文件三要素: 1.表单提交方式:post (get方式提交有大小 ...

  4. 连接到 redis 服务

    连接到 redis 服务 <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); ...

  5. AtCoder Grand Contest 021题解

    传送门 \(A\) 咕咕 ll n,res;bool fl; int main(){ scanf("%lld",&n),fl=1; while(n>9)res+=9, ...

  6. UOJ449. 【集训队作业2018】喂鸽子 [概率期望,min-max容斥,生成函数]

    UOJ 思路 由于最近养成的不写代码的习惯(其实就是懒),以下式子不保证正确性. 上来我们先甩一个min-max容斥.由于每只鸽子是一样的,这只贡献了\(O(n)\)的复杂度. 现在的问题转化为对于\ ...

  7. YII框架的行为

    一.什么是行为 行为,也称为 mixins,可以无须改变类继承关系即可增强一个已有的类的功能. 当一个对象或类被注入某些行为后,这个对象可以像访问自己定义的方法和属性一样访问注入进来的方法和属性. 二 ...

  8. STP生成树算法

    生成树算法第一:决定谁是“根网桥”对比各个网桥ID,先对比ID中的优先级,优先级相同的时候对比网桥MAC地址,对比依据是谁的值最小,谁是“根网桥” 第二:决定哪些是“根端口”窍门——每个非根网桥上都有 ...

  9. winform如何不卡界面

    快速阅读 如何在winform程序中,让界面不再卡死. 关于委托和AsyncCallback的使用. 界面卡死的原因是因为耗时任务的计算占用了主线程,导致主界面没有办法进行其它操作,比如拖动.造成界面 ...

  10. python操作toml文件

    # -*- coding: utf-8 -*- # @Time : 2019-11-18 09:31 # @Author : cxa # @File : toml_demo.py # @Softwar ...