layui后台管理、图片裁切、cropper富文本编辑器实现

需求：后台管理系统一般都会有图文混排功能（比如新闻应用，电商商品详情），这个一般使用富文本编辑器来实现；还有一个就是图片的裁切（比如用户的头像，比如博客的封面），因为在开发这两个功能的时候，也遇到了很多的坑，所以在这里记录一下。

富文本编辑器实现

技术选型：富文本编辑器很多，我们选择的是layui editor，版本是2.5.6

实现效果如下：来源：layui eidt

开发步骤：

1、导入layui的css、layui的js（注意这里是2.5.6的版本）

在body之前导入css，在body之后导入js文件（否则会有坑）

2、在body中添加一个文本域

<body><form>...省略其他表单元素<textarea id="content" style="display: none;"></textarea></form>
</body>

3、初始化富文本编辑器

layedit的实现思路，先找到一个宿主标签（textarea），在它的后面添加一个兄弟节点来实现的，所以宿主元素必须要写。其实尝试了一下，使用其他的标签作为宿主标签也可以。比如div，但是不建议这么干，因为div不是表单元素，提交数据拿不到值。

注意：这个代码一定要在文档加载完成之后再执行，否则没效果，代码来源于文档

<script>
layui.use('layedit', function(){var layedit = layui.layedit;//build方法的demo参数是宿主标签的id属性，注意这里不需要加#号layedit.build('content'); //建立编辑器
});
</script>

4、此时可以测试是否显示富文本编辑器，如果不显示，查询一下原因：

1、js导入是不是在html最后

2、第三步的初始化脚本是不是在文档加载完成后执行（在html最后）

3、检查宿主标签的id属性和layedit.build方法的参数是否一致

5、重点：

在实际项目开发中，表单一般都是ajax异步提交的，那么就需要我们自己去收集表单元素（input，select、checkbox、radio、file、textarea）的数据。富文本编辑器中的内容通过提交按钮同步提交是可以收集到表单数据的，但是ajax提交收集不到，因为此时数据在富文本编辑器中，而我们要提交的是textarea，所以没有数据；我们还需要把富文本编辑器的内容获取到，然后设置到textarea中。

所以查看文档：

第3个方法getContent就能得到编辑器的内容，所以有两步需要做：

1、得到编辑器的内容

2、设置到textarea中

layedit.getContent(index); 具体代码参考下图

下图中getContent()方法就是获取编辑器中的值，设置值到textarea中的，这个方法在ajax提交之前调用即可。

注意：106和107行，因为getContent调用需要使用index，而且是跨作用域的，所以设置成全局，layedit同理，否则出现变量未定义错误。

图片上传：

A用户写博客从A用户的电脑上传图片到服务器，将来其它用户就能访问到此图片，所以这个功能其实就是把A用户本地图片进行共享，上传的目的是为了把A用户本地图片转换成网址，这个网址其实是服务器上的图片服务器的地址，所以上传之后服务器会返回一个http打头的网址，然年通过<img src="网址">的方式在富文本编辑器中显示出来；根据文档，我们只需要填写服务器的图片上传接口地址即可。

注意：layedit.set方法一定要写在layedit.build方法之前，否则没效果。url和后面的参数自己参考后台程序员提供的接口来实现

图片裁切

裁切的目的：保证每个人上传的图片的大小是一致的，而且不会变形

技术选型：Image Cropper；文档写的一般，所以记录一下。

展示效果如下：点击选择图片按钮弹出文件选择框选择图片，图片会同步显示到左侧裁切容器和右侧预览容器中。

1、布局思路

一个大盒子，里面两个小盒子

2、功能实现

2.1 点击选择图片按钮弹出文件选择框，根据html基础，只有<input type="file">它才能触发文件选择框，所以思路是，弄一个普通按钮，点击它的时候去触发<input type="file">的点击事件。

//用到的知识点   jquery主动触发点击事件
$().click()

遇到的问题：layui中的button自动提交表单

解决办法：给button添加type="button"属性即可

2.2 上一步能弹出框，但是有一个问题，选择的文件在<input type="file">标签中，但是我们需要让这个图片显示到盒子1中，所以需要获取到<input type="file">里面的图片内容，但是查询文档百思不得其解，HTML文档DOM对象中说过，页面有一个<input type="file">，系统就会创建一个FileUpload对象，但是此对象中并没有图片的完整路径，但是<img src="">显示图片又需要完整路径，经过两天的百度，找到如下方法：getInputURL，也有其他的方案，大家自行选择。

  //选择完图片，点击确认按钮$("[type=file]").change(function() {console.log("改变事件");//拿到了文件对象，缺少路径var file = $(this)[0].files[0];//把FileUpload对象转换成一个地址，这个地址img能识别var p = getInputURL(file);$("img").prop("src", p);});function getInputURL(file) {var url = null;if (window.createObjcectURL != undefined) {url = window.createOjcectURL(file);} else if (window.URL != undefined) {url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {url = window.webkitURL.createObjectURL(file);}return url;}

遇到的坑：

$("img").prop("src",p);这句代码要注意，前面的选择器只能通过标签选择，否则会有一个问题，盒子1和小盒子1中的图片不能回显。

2.3 图片选择好了之后如何提交？

因为是ajax提交，图片其实在第三方组件中，并不是我们设置的提交表单元素，所以提交表单没有值，我们需要做两步：1、拿到裁切的图片 2、转换成base64 3、设置到表单元素中（采用隐藏域实现）

1、拿到裁切的图片

文档对于方法的介绍如下，只说过$().cropper("方法名",参数1,参数2....)这种语法，$()这是jquery的选择器，这种语法明显不对，查询文档找到这句话$('.container > img').cropper()，所以$(这里应该是盒子1中的img的标识)，所以完整语法是：

$('.container > img').cropper("方法名"),然后这个插件的方法很多，既然是要获取，所以方法肯定是get打头的，经过测试只有getCroppedCanvas方法才能实现，打印结果如下，<canvas width="400" height="240"></canvas>，是一个canvas标签，根据DOM常识，查询html5文档，canvas对象有一个方法可以转base64，toDataURLf方法

在ajax提交表单之前调用此方法就可以拿到图片的base64字符串，然后把它设置到隐藏域

    function getBase64() {var result = $('.container > img').cropper("getCroppedCanvas");console.log(result);var base64 = result.toDataURL('image/png');$("#coverBase64").val(base64);}

坑1：默认不给图片

不给默认图片，裁切框出不来；这个跟插件的初始化方法有关系；两种解决办法：

1、给个默认图片，纯白色

2、延迟初始化

坑2：不上传图片，使用默认的，直接点击按钮，报错导致表单提交失败

设置一个变量flag=false，只有当用户点击上传图片按钮，把flag改成true，提交之前判断一下，如果flag=false，提示用户选择图片。

总结：img标签可以支持的格式：file协议的、http协议的、base64编码的，blob格式的（blob:null/5c49ecbc-96d4-4ec6-8c0d-b77543c23e86）