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. ubuntu下subversion1.7的安装

    环境: ubuntu11.10 subversion1.7 1.用synaptic安装的svn都是1.6版,根本于现在的主流svn服务器无法通信.需要升级为1.7. 1.1 apt-add-repos ...

  2. spring boot 集成 redis lettuce(jedis)

    spring boot框架中已经集成了redis,在1.x.x的版本时默认使用的jedis客户端,现在是2.x.x版本默认使用的lettuce客户端 引入依赖 <!-- spring boot ...

  3. 使用对象,面向对象创建div的方式

    <script> // //对象div的创建 // var div = document.createElement("div"); // document.body. ...

  4. info命令

    info命令也可以查看命令的信息,但是和man命令不同,info命令如同一本书,一个命令只不过是书中的一个章节. 1.基本结构: 输入:info ls ls命令只不过是整个文档的10.1章节. 而在章 ...

  5. nyar4psg: Cannot find a class or type named "MultiMarker"

    Cannot find a class or type named "MultiMarker" 是一种常见错误,产生的原因是Library里面有1个以上的ar库. 以我的电脑为例, ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. zotero zotfile插件 pdf附件文件夹在多系统下的同步设置

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/research/zotero_multiple_directory_pdf_sync ...

  8. el-select定义初始值并且可以修改

    [](https://img2018.cnblogs.com/blog/1338470/201811/1338470-20181112152013318-1731627947.png <el-f ...

  9. SQL中的xp_cmdshell拒绝访问

    数据库备份作业的sql,,最后一步删除指定时间之前的文件夹.. 使用 xp_cmdshell 函数调用  RMDIR 命令删除过期文件夹,但返回拒绝访问.. 代码如下: DECLARE @PATH2 ...

  10. Spring boot MyBatis基本操作

    XML 配置方式 目录结构 数据库信息: 数据库student -> 表名 custom_user  -> 主键-> custom_id ,其他字段 cusotm_name,cust ...