springboot 整合 Froala Editor 3
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的更多相关文章
- SpringBoot(七):SpringBoot整合Swagger2
原文地址:https://blog.csdn.net/saytime/article/details/74937664 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文 ...
- SpringBoot整合Swagger2
相信各位在公司写API文档数量应该不少,当然如果你还处在自己一个人开发前后台的年代,当我没说,如今为了前后台更好的对接,还是为了以后交接方便,都有要求写API文档. 手写Api文档的几个痛点: 文档需 ...
- SpringBoot整合Swagger和Actuator
前言 本篇文章主要介绍的是SpringBoot整合Swagger(API文档生成框架)和SpringBoot整合Actuator(项目监控)使用教程. SpringBoot整合Swagger 说明:如 ...
- springboot 整合Swagger2的使用
Swagger2相较于传统Api文档的优点 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文档更新交流不及时. 接口返回结果不明确 不能直接在线测试接口,通常需要使用工 ...
- Activiti工作流学习之SpringBoot整合Activiti5.22.0实现在线设计器(二)
一.概述 网上有很多关于Eclipse.IDEA等IDE插件通过拖拽的方式来画工作流程图,个人觉得还是不够好,所以花点时间研究了一下Activiti在线设计器,并与SpringBoot整合. 二.实现 ...
- SpringBoot整合Shiro权限框架实战
什么是ACL和RBAC ACL Access Control list:访问控制列表 优点:简单易用,开发便捷 缺点:用户和权限直接挂钩,导致在授予时的复杂性,比较分散,不便于管理 例子:常见的文件系 ...
- spring-boot整合mybatis(1)
sprig-boot是一个微服务架构,加快了spring工程快速开发,以及简便了配置.接下来开始spring-boot与mybatis的整合. 1.创建一个maven工程命名为spring-boot- ...
- SpringBoot整合Mybatis之项目结构、数据源
已经有好些日子没有总结了,不是变懒了,而是我一直在奋力学习springboot的路上,现在也算是完成了第一阶段的学习,今天给各位总结总结. 之前在网上找过不少关于springboot的教程,都是一些比 ...
- springboot整合mq接收消息队列
继上篇springboot整合mq发送消息队列 本篇主要在上篇基础上进行activiemq消息队列的接收springboot整合mq发送消息队列 第一步:新建marven项目,配置pom文件 < ...
随机推荐
- ubuntu下subversion1.7的安装
环境: ubuntu11.10 subversion1.7 1.用synaptic安装的svn都是1.6版,根本于现在的主流svn服务器无法通信.需要升级为1.7. 1.1 apt-add-repos ...
- spring boot 集成 redis lettuce(jedis)
spring boot框架中已经集成了redis,在1.x.x的版本时默认使用的jedis客户端,现在是2.x.x版本默认使用的lettuce客户端 引入依赖 <!-- spring boot ...
- 使用对象,面向对象创建div的方式
<script> // //对象div的创建 // var div = document.createElement("div"); // document.body. ...
- info命令
info命令也可以查看命令的信息,但是和man命令不同,info命令如同一本书,一个命令只不过是书中的一个章节. 1.基本结构: 输入:info ls ls命令只不过是整个文档的10.1章节. 而在章 ...
- nyar4psg: Cannot find a class or type named "MultiMarker"
Cannot find a class or type named "MultiMarker" 是一种常见错误,产生的原因是Library里面有1个以上的ar库. 以我的电脑为例, ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- zotero zotfile插件 pdf附件文件夹在多系统下的同步设置
本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/research/zotero_multiple_directory_pdf_sync ...
- el-select定义初始值并且可以修改
[](https://img2018.cnblogs.com/blog/1338470/201811/1338470-20181112152013318-1731627947.png <el-f ...
- SQL中的xp_cmdshell拒绝访问
数据库备份作业的sql,,最后一步删除指定时间之前的文件夹.. 使用 xp_cmdshell 函数调用 RMDIR 命令删除过期文件夹,但返回拒绝访问.. 代码如下: DECLARE @PATH2 ...
- Spring boot MyBatis基本操作
XML 配置方式 目录结构 数据库信息: 数据库student -> 表名 custom_user -> 主键-> custom_id ,其他字段 cusotm_name,cust ...