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

最新推荐文章于 2024-02-21 19:21:24 发布

休要放肆

最新推荐文章于 2024-02-21 19:21:24 发布

阅读量1.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/luochengcs000/article/details/117741205

版权

本文档详细介绍了如何使用layui编辑器实现图文混排功能，包括编辑器的配置、内容获取与表单提交处理。同时，文章还讲解了图片裁切功能的实现，采用Image Cropper组件，解决了图片上传、裁切后如何转化为base64并提交到服务器的问题，确保图片尺寸一致且不破坏原有形状。

摘要由CSDN通过智能技术生成

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

技术选型：富文本编辑器很多，我们选择的是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属性，注意

关注

专栏目录