layui 富文本上传图片

layui是一款轻量级的前端UI框架，它提供了一个方便快捷的方式来实现富文本编辑器的功能，其中包括图片上传。在layui中，可以利用其Upload组件来集成图片上传功能到富文本编辑器中。

以下是基本步骤：

1. 引入必要的插件：首先，在HTML页面中引入layui的样式和js文件，以及upload模块的js文件。

<script src="layui/layui.all.min.js"></script>
<script src="layui/upload.js"></script>

2. 初始化 Upload 组件：创建一个form表单，并设置上传图片的相关配置，如URL、接受类型等。

<form class="layui-form">
    <div class="layui-upload layui-upload multiple layui-form-item">
        <button type="button" class="layui-btn layui-upload-button">点击选择图片</button>
        <ul class="layui-upload-list"></ul>
    </div>
</form>

<script>
layui.use(['upload'], function(){
    var upload = layui.upload;
    // 上传配置
    upload.render({
        elem: '.layui-upload-button', // 用于触发上传的按钮
        url: '服务器图片上传接口地址', // 上传接口
        auto: true,
        file: '.layui-upload-list', // 文件容器
        done: function(res, file, dom, img) { // 图片上传成功后的回调
            console.log(res);
            // 将图片URL插入到富文本编辑器中
            // 示例：假设富文本编辑器ID为editor
            document.getElementById('editor').value += '<img src="' + res.info.file_url + '" />';
        }
    });
});
</script>

在这个例子中，当用户点击“点击选择图片”按钮时，会选择并上传图片，上传完成后，图片的URL会被添加到富文本编辑器内。