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);//反转义

 

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