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);//反轉義

 

這樣就能正常保存到數據庫了。