由于公司项目中使用的wangedit富文本编辑器,苹果手机无法输入,所以更换为layuiEdit富文本编辑器。
1. Html代码:
<textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>
2. JS代码:
layui.use(['layer', 'layedit'], function () { var layer = layui.layer; var layedit = layui.layedit; // 设置编辑器的图片上传配置 layedit.set({ uploadImage: { url: '/user/Ueditor/layeditUpload/' // 接口url ,type: 'post' // 默认post } }); //构建一个默认的编辑器 var index = layedit.build('LAY_demo1', { tool: ['image'], }); });
3. PHP代码(ThinkCMF5框架):
/** * [layeditUpload Layui富文本编辑器 图片上传] * @return [type] [description] */ public function layeditUpload() { $post = $this->request->param(); $ftype = !empty($post['ftype']) ? $post['ftype'] : 'image'; $uploader = new Upload(); $uploader->setFileType($ftype); $uploader->setFormName('file'); $result = $uploader->upload(); if ($result) { $data = []; $data['src'] = $result['url']; $data['title'] = $result['name']; return ['code'=>0, 'msg'=>'成功', 'data'=>['src'=>$result['url'], 'title'=>$result['name']]]; } else { return ['code'=>1, 'msg'=>$uploader->getError()]; } }
4. 获取编辑器的内容
layedit.getContent(index)
5. 官方文档:https://www.layui.com/doc/modules/layedit.html
敲黑板!!重点来了,下面讲述下几个比较坑的地方:
后端返回给前端的数据格式
一定要注意看官方文档,不要想当然的给状态码(code = 0 才表示成功,其他失败!!!!!好吧,我承认我载了。。。)一定要按照这个格式返回数据,否则无法回显到编辑器内
2. 编辑器内照片回显尺寸过大
(1)找到layedi.js 文件,路径:layui/lay/modules/layedit.js
(2)文件中定义了编辑器内的CSS样式,修改img的CSS样式,如下图,max-width: 90% 是我加上去的,可以根据自己的需求自行设定
(3)修改完成后,页面一定要强制刷新,否则浏览器缓存会让你奔溃到怀疑人生。。。