编辑器地址: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(empty($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": "图片名称" //可选
}
}

tp5 集成 layui富文本编辑器的更多相关文章

  1. ASP.NET MVC实现layui富文本编辑器应用

    先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: ...

  2. 关于layui富文本编辑器和form表单提交的问题

    今天下午因为要做一个富文本编辑器上传文件给后台,所以看了一下layui的富文本编辑器,折腾了半天,终于把这玩意搞定了. 首先需要先创建layui的富文本编辑器 <textarea id=&quo ...

  3. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

  4. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  5. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  6. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  7. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  8. django xadmin 集成DjangoUeditor富文本编辑器

    本文档记录自己的学习历程! 介绍 Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 额外功能 解决图片视频等无法上传显示问题 Ueditor下载地址 https://gith ...

  9. 在Vue2.0中集成UEditor 富文本编辑器

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很 ...

随机推荐

  1. Shell脚本编程入门到放弃

    1 区分大小写 UNIX是区分大小写的,因此shell脚本也是区分大小写的 2 特殊字符 UNIX的某些字符都有特殊的意义或功能,如果它们不以其特殊的意义使用必须要进行转义(escaped). 为了转 ...

  2. C#有关的vshost、exe、config格式说明

    vshost.exe.config是程序运行时的配置文本 exe.config是程序运行后会复制到vshost.exe.config app.config是在vshost.exe.config和exe ...

  3. ceRNA 调控机制

    ceRNA 不同于mRNA, lncRNA, ncRNA 等概念,其指的既不是某一种类型的RNA(比如mRNA, lncRNA), 也不是某一类的RNA(如ncRNA); ceRNA 其实指的是不同种 ...

  4. dos中执行cd命令切换不到对应的盘解决方法

    可以使用cd命令,不过需要加参数 /d,如: cd /d e:

  5. opencv播放视屏并控制位置

    原文地址:http://blog.csdn.net/augusdi/article/details/9000592 cvGetCaptureProperty是我们需要使用到的获取视频属性的函数. do ...

  6. UIScrollView 的代理方法简单注解

    //减速停止了时执行,手触摸时执行执行 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;    //只要滚动了就会触发 ...

  7. 学习 TList 类的实现[3] - 不能回避的话题: 内存分配

    在 Delphi 中, 几乎所有的类型都有对应的指针类型, 譬如: Char PChar Word PWORD Double PDouble TPoint PPoint 甚至一种类型对应这着几种指针类 ...

  8. C语言中FILE是结构体,文件类型的指针

    c语言文件类型指针 我们在定义文件类型指针变量后,称作该指针指向该文件,但本质上,它不是指向一个存储文件信息的结构型变量么?那么我们在用各个函数对所谓的“文件指针”进行操作时,本质上是不是函数通过获取 ...

  9. 电脑开机提示 NTLDR is missing

    电脑开机,黑屏并提示NTLDR is missing Press Ctrl+Alt+Del to restart,并且反复重启都不行,这是怎么回事呢?首先我们来分析下这段英语的含义:NTLDR是指NT ...

  10. shell脚本中判断一个字符串是否是空字符串

    需求说明: 在写脚本的时候,有的时候,需要判断一个字符串是否为空,因此,在此写出如何判断一个字符串为空的方法. 简单来说,就是字符串的比较. 测试脚本: 以下的脚本用于测试str_1和str_2是否是 ...