编辑器地址：http://www.layui.com/doc/modules/layedit.html
效果图如下：
1、 去官网：http://www.layui.com/ 下载layui
结构如下：
- ├─css //css目录
- │ └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）
- │ ├─laydate
- │ ├─layer
- │ │ └─default
- │ └─layim
- │ └─skin
- ├─font //字体图标目录
- ├─images //图片资源目录（一些表情等）
- │ └─face
- └─lay //JS目录
- ├─dest //经过合并的完整模块
- └─modules //各模块/组件
2、 找到tp5 项目目录： 根目录/public/static/ 把下载的layui文件夹放进去
效果如下图：
3、 html 部分（主要内容如以下代码）
- <link rel="stylesheet" href="/static/layui/css/layui.css">
- <script src="/static/layui/layui.js"></script>
- <textarea id="demo" name="content" style="display: none;"></textarea>
- <script>
- layui.use('layedit', function(){
- var layedit = layui.layedit;
- //上传图片接口：注意：layedit.set 一定要放在 build前面，否则配置全局接口将无效
- layedit.set({
- uploadImage: {
- url: '/admin/Article/lay_img_upload', //接口url
- type: 'post', //默认post
- }
- });
- //创建编辑器
- layedit.build('demo'),{
- width:600,
- height: 180 //设置编辑器高度
- }; //建立编辑器
- });
- </script>
4、PHP部分代码如下：
- //内容接收
- $content = input('content');
- //控制器头部要引入
- use think\Request;
- //layui编辑器图片上传接口
- public function lay_img_upload(){
- $file = Request::instance()->file('file');
- if(emptyempty($file)){
- $result["code"] = "1";
- $result["msg"] = "请选择图片";
- $result['data']["src"] = '';
- }else{
- // 移动到框架应用根目录/public/uploads/ 目录下
- $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' );
- if($info){
- $name_path =str_replace('\\',"/",$info->getSaveName());
- //成功上传后 获取上传信息
- $result["code"] = '0';
- $result["msg"] = "上传成功";
- $result['data']["src"] = "/uploads/layui/".$name_path;
- }else{
- // 上传失败获取错误信息
- $result["code"] = "2";
- $result["msg"] = "上传出错";
- $result['data']["src"] ='';
- }
- }
- return json_encode($result);
- }
- //layui图片规定返回格式，，依据这个格式，做上面代码的相应返回处理
- {
- "code": 0 //0表示成功，其它失败
- ,"msg": "" //提示信息 //一般上传失败后返回
- ,"data": {
- "src": "图片路径"
- ,"title": "图片名称" //可选
- }
- }
2017年08月11日 21:04:52 沙发
layui编辑器看上去很不错，不知道跟百度编辑器比起来，哪个更好用点？