本文档详细介绍了如何使用layui编辑器实现图文混排功能，包括编辑器的配置、内容获取与表单提交处理。同时，文章还讲解了图片裁切功能的实现，采用Image Cropper组件，解决了图片上传、裁切后如何转化为base64并提交到服务器的问题，确保图片尺寸一致且不破坏原有形状。
需求：后台管理系统一般都会有图文混排功能（比如新闻应用，电商商品详情），这个一般使用富文本编辑器来实现；还有一个就是图片的裁切（比如用户的头像，比如博客的封面），因为在开发这两个功能的时候，也遇到了很多的坑，所以在这里记录一下。
富文本编辑器实现
技术选型：富文本编辑器很多，我们选择的是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、初始化富文本编辑器
最低0.47元/天 解锁文章
扫一扫
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
