超好用的富文本编辑器froalaEditor（方便传图片和视频等）

最近项目有个文章管理功能，我对比了很多富文本编辑器，有的是上传图片不方便，有的是复制粘贴不方便，有的是但编辑器里面不能改变图片大小，最后，我找到了froalaEditor,可以说是集各种功能为一身，不但界面清爽，功能也十分全面，插入图片和视频都很方便，自己可以到官网体验一下：https://www.froala.com/wysiwyg-editor

官方文档地址：https://www.froala.com/wysiwyg-editor/docs

由于官方提供的下载包没有第三方插件，不太全，所以自己整理了全面的插件

插件下载地址：

https://download.csdn.net/download/lianzhang861/10756460

代码：

<!DOCTYPE HTML>
<html>
<head><!-- Include external CSS. --><link href="${ctx }/common/static/froala_editor_2.8.5/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="${ctx }/common/static/froala_editor_2.8.5/codemirror/codemirror-5.40.2/lib/codemirror.css"><link href="${ctx }/common/static/froala_editor_2.8.5/css/themes/dark.min.css" rel="stylesheet" type="text/css" /><!-- Include Editor style. --><link href="${ctx }/common/static/froala_editor_2.8.5/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /><link href="${ctx }/common/static/froala_editor_2.8.5/css/froala_style.min.css" rel="stylesheet" type="text/css" /><title>创建文章</title>
</head>
<body>
<article class="page-container"  style="margin-left:25px;"><input type="hidden" name="articleId" id="articleId" value="${article.article_id}"/><div class="row cl" ><div id="artcleName"><input type="text" class="input-text" placeholder="输入文章标题" style="background:#eee;margin-bottom:10px;"></div><div id="edit"></div></div><div class="row cl" style="margin:50px 0;"><div class="col-xs-8 col-sm-7 col-xs-offset-4 col-sm-offset-3"><input class="btn btn-primary radius" type="button" onclick="saveArticle()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"></div></div>
</article>
<script type="text/javascript" src="${ctx}/common/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/common/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctx }/common/static/froala_editor_2.8.5/codemirror/codemirror-5.40.2/lib/codemirror.js"></script>
<script type="text/javascript" src="${ctx }/common/static/froala_editor_2.8.5/codemirror/codemirror-5.40.2/mode/xml/xml.js"></script><!-- Include Editor JS files. -->
<script type="text/javascript" src="${ctx }/common/static/froala_editor_2.8.5/js/froala_editor.pkgd.min.js"></script>
<!--中文字体包，注意要放在最下面，不然会报错-->
<script type="text/javascript" src="${ctx }/common/static/froala_editor_2.8.5/js/languages/zh_cn.js"></script>
<script type="text/javascript">$(function (){//超大屏幕的功能按钮var toolbarButtons   = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'];//大屏幕的功能按钮var toolbarButtonsMD = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting'];//小屏幕的功能按钮var toolbarButtonsSM = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo'];//手机的功能按钮var toolbarButtonsXS = ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'];//var pid = $('#pid').val();//编辑器初始化并赋值$('#edit').on('froalaEditor.initialized', function (e, editor) {$('#edit').froalaEditor('html.set','${article.article_content}');}).froalaEditor({placeholderText: '请输入内容', //默认填充内容charCounterCount       : true,//默认 显示字数saveInterval           : 0,//不自动保存，默认10000，0为不自动保存//theme                  : "dark",//主题：dark，red，gray，royal，注意需要引入对应主题的cssheight                  : "600px",toolbarBottom           : false,//默认toolbarButtonsMD        : toolbarButtonsMD,toolbarButtonsSM        : toolbarButtonsSM,toolbarButtonsXS        : toolbarButtonsXS,toolbarInline           : false,//true选中设置样式,默认falseimageUploadMethod       : 'POST',heightMin: 450,charCounterMax: 3000,  //最大字数限制，-1为不限制saveURL: '${ctx}/webmana/article/saveArticle',  //自动保存的地址（body参数为html内容）saveParams: { postId: '1'},  //保存内容时传的参数spellcheck: false,  //是否允许浏览器对输入内容进行拼写检查imageUploadURL: '${ctx}/webmana/attachment/uploadArticleImg',//上传到本地服务器//imageUploadParams: {pid: '1'}, //上传图片时带的参数///imageDefaultWidth: 100, //上传图片后的默认大小//imageResizeWithPercent: true,//不设置这个，imageDefaultWidth的单位为像素，设置后为%videoUploadURL:'${ctx}/webmana/attachment/uploadArticleVideo',enter: $.FroalaEditor.ENTER_BR, //设置回车键功能language: 'zh_cn',// toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat', 'align','color','fontSize','insertImage','insertTable','undo', 'redo']});})function saveArticle(){var html=$('#edit').froalaEditor('html.get', true); //返回富文本编辑里面的html代码$.ajax({type: 'POST',url: '${ctx}/webmana/article/saveArticle',dataType: 'json',data:{"articleName":$("#articleName").val(),"body":html,"articleId":$("#articleId").val()},success: function(data){if(data.success){layer.msg("保存成功", {icon: 1, time: 1500},function(){window.parent.location.reload();});}else{layer.msg("保存失败", {icon: 1, time: 1500},function(){window.parent.location.reload();});}},error:function(data) {//console.log(data.msg);},});}</script></body>

代码里面比较说的比较清楚了，插件默认按钮是英文title，引入中文包并设置就成为中文了,下面先总结几个比较重要的点

1.初始化：

$('#edit').froalaEditor({})

2.自动保存：

saveURL为自动保存地址，如果需要就设置为点击保存相同的地址即可

3.保存时传入参数

saveParams: { postId: '1'} 在这个参数中可以放入保存文章时顺带往后台传的参数

4.图片上传路径

imageUploadURL 如果要图片上传功能，则这个路径必须写，路径为保存图片的路径，上传图片时的参数在imageUploadParams中写。

注意：后台保存图片需要返回给前台图片的路径，而且格式必须是这样的

附java后台上传图片方法：

// 上传文章图片@RequestMapping(value = "uploadArticleImg", method = RequestMethod.POST, produces = "application/json;charset=utf-8")@ResponseBodypublic String uploadArticleImg(@RequestParam(value = "file") MultipartFile file,  //这样接收文件@RequestParam Map<String,String> params,HttpServletRequest request) {Map<String,Object> ret=new HashMap<String, Object>();try {String path="/attachments/articleImages/";Map<String,String> name=uploadFile(path,file, request);ret.put("link","http://" + request.getServerName() //服务器地址+ ":"+ request.getServerPort() +path+name.get("saveName"));// 返回前台return JSON.toJSONString(ret);} catch (Exception e) {e.printStackTrace();return JSON.toJSONString("fail");}}public Map<String,String> uploadFile(String path,MultipartFile file, HttpServletRequest request) throws IOException {Map<String,String> result=new HashMap<String,String>();String fileName = file.getOriginalFilename();//String basePath=request.getSession().getServletContext().getRealPath("/");// path=basePath+path;            //设置文件保存路径
//        File tempFile = new File(path, new Date().getTime() + String.valueOf(fileName));String fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()).toLowerCase();String saveName=String.valueOf((new Date()).getTime()).substring(8)+(int)((Math.random()*999+1))+'.'+fileType;File tempFile = new File(basePath+path, String.valueOf(saveName));if (!tempFile.getParentFile().exists()) {    //创建文件夹tempFile.getParentFile().mkdir();}if (!tempFile.exists()) {tempFile.createNewFile();}file.transferTo(tempFile);result.put("fileName",fileName);result.put("saveName",saveName);return result;}

5.视频上传

videoUploadURL在这个参数中写视频的上传路径，方法与上传图片相同

6.获取编辑完成生成的代码：

 var html=$('#edit').froalaEditor('html.get', true); //返回富文本编辑里面的html代码

提交时就把这个html提交后台即可，获取的文本是有行内样式的html标签，如下，如果要展示文章，直接将html赋值给一个div就可以完全复原

标题<br><img src="http://localhost:8081/attachments/articleImages/47321141.jpg" style="width: 515px;" class="fr-fic fr-dib"><br><span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable fr-fvc fr-dvi" controls="" src="http://localhost:8081/attachments/articleVideos/23907698.mp4" style="width: 1145px; height: 522px;">Your browser does not support HTML5 video.</video></span>

7.点击编辑按钮时将旧数据放进编辑中

$('#edit').on('froalaEditor.initialized', function (e, editor) {$('#edit').froalaEditor('html.set','获取的html文本');}).froalaEditor({})

加一个'froalaEditor.initialized'，在里面用$('#edit').froalaEditor('html.set','获取的html文本') 即可

8.手机端展示最好把上传的图片视频默认为宽度100%

一般图片上传后会将你调整后的图片宽度以px为单位存入后台，但是有时我们需要图片宽度为100%，则需要设置

imageDefaultWidth和imageResizeWithPercent：true参数

不设置imageResizeWithPercent，imageDefaultWidth的单位为像素，设置后为%

9.破解

注意，因为此编辑器有个版权问题，在本机自己练习时正常，但程序部署到服务器时使用编辑时，会在编辑器内出现一行红色背景的字，提醒你版权问题，影响用户体验

解决办法：

.fr-wrapper > div[style*='z-index: 9999'] {position: absolute;top: -10000px;opacity: 0;display: none;}

在使用页加上上述css就行了，版权提醒去无踪

*仅限个人学习使用，商用的话还是购买下版权吧

超好用的富文本编辑器froalaEditor（方便传图片和视频等）相关推荐

微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
富文本编辑器三种不同图片上传功能
最近在集成富文本和fastDFS文服做图片上传,找了写相关资料,感觉官网的比较全也比较杂.刚好看到一片好的文章,然后我就转载并对不太详细的地方进行了一定的修改并新添加了一种前后端分离的方法.各位小伙 ...
ckeditor富文本编辑器的使用和图片上传
项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API.考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本.官网链接:ckedi ...
element-tiptap富文本编辑器，上传本地图片
因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过) data () {// ...
Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
富文本编辑器iceEditor中上传word并回显
项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路 ...

超好用的富文本编辑器froalaEditor（方便传图片和视频等）

9.破解

超好用的富文本编辑器froalaEditor（方便传图片和视频等）相关推荐

最新文章

热门文章