其他分享
首页 > 其他分享> > springboot 整合 Froala Editor 3

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

 

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

 

标签:content,springboot,转义,Editor,html,editor,文本,true,Froala
来源: https://www.cnblogs.com/taiguyiba/p/11016517.html