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

 

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