2016年12月11日 08:46:59 星期日

百度的简版富文本编辑器umeditor很久没更新了

全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主要说明图片上传怎么使用

HTML:

 //承载编辑器
<script id="container" name="content" type="text/plain"></script> //加载js
<script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.all.min.js"></script> <script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor('container',
{
initialContent:'',
initialFrameWidth:1000,
initialFrameHeight:240,
serverUrl:"<?= BASEURL ?>Home/Upload/ueUpload",
imagePath:"", //路径前缀
           imageUrlPrefix:'' //image前缀, 如果服务端返回的图片地址中有http://...那这里就留空, 此项必须有
});
</script>

注意: 第16行, 要写你的PHP代码可访问链接, ueditor会自动拼接相关的参数去指明要什么东西:

第一步: ueditor会先拼接上 ?action=config 告诉PHP返回一些配置信息,

第二步: ueditor获取上一步返回的json配置信息后拼接上 ?action=xxx 再次请求进行图片上传

PHP代码(上传到了阿里云)

 /**
* 百度ueditor编辑器调用,
* 对应js配置项为serverUrl
*/
public function ueUpload()
{
$arg = I('get.action');
switch ($arg) {
case 'config':
exit('{
/* 上传图片配置项 */
"imageActionName": "ueUploadImage", /* 执行上传图片的action名称 */
"imageFieldName": "ueUpfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制,单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
/* 截图工具上传 */
"snapscreenActionName": "ueUploadImage", /* 执行上传截图的action名称 */
}');
break;
case 'ueUploadImage': //这个值对应上个case中的ueUploadImage
$oss = new Upload();
$url = $oss->up('ueUpfile', 'ueditor'); //ueUpfile 对应上个case中的ueUpfild
if ($oss->isOk()) { //上传成功
$rs = [
'state' => 'SUCCESS',
'url' => $url,
'title' => '',
'original' => ''
];
$this->ajaxReturn($rs);
} else { //上传失败
$rs = [
'state' => '上传图片失败',
];
$this->ajaxReturn($rs);
}
break;
default:
exit();
}
}

注意:

1. 第12行和第21行的配置是对应的, 第13行的值就是上传的$_FILES中的表单名字

2. 注意25~30行, 是上传成功后的返回结构(转为json返回)

3. 注意33~35行, 是上传失败后的返回结构(转为json返回)

PHP Ueditor 富文本编辑器的更多相关文章

  1. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  2. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  3. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  4. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  5. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  6. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  7. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  8. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  9. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

随机推荐

  1. 冰冻三尺非一日之寒--web框架Django(翻页、cookie)

    第二十一章 cookie 1.获取Cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, ...

  2. ajax实现局部刷新

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  3. javascript基本对象

    1 String对象 创建对象 var string1 = new String("Hello"); var string2 = "Hello" //也可以创建 ...

  4. foreach

    一 foreach的语法介绍    PHP 4以上的版本包括了 foreach 结构,这只是一种遍历数组简便方法.foreach 仅能用于数组,当试图将其用于其它数据类型或者一个未初始化的变量时会产生 ...

  5. Clang: Undefined symbols, but it is there using nm.

    https://stackoverflow.com/questions/36662920/xcode-clang-link-build-dynamic-framework-or-dylib-not-e ...

  6. thinkphp 3.2 CronRunBehavior.class 使用

    1.配置文件 在www\erp\App\Common\Conf tags.php <?php return array( 'app_begin' => array('Behavior\Cr ...

  7. Maven的安装及更改下载仓库

    之前在MyEclipse这个IDE中配置Maven,完成配置后启动Maven时出现-Dmaven.multiModuleProjectDirectory system propery is not s ...

  8. 2016百度之星 初赛2A ABEF

    只做了1001 1002 1005 1006.剩下2题可能以后补? http://acm.hdu.edu.cn/search.php?field=problem&key=2016%22%B0% ...

  9. Codility NumberSolitaire Solution

    1.题目: A game for one player is played on a board consisting of N consecutive squares, numbered from ...

  10. Oracle 如何扩展表空间

    第一步:查看ORACLE表空间的使用情况:SELECT DBF.TABLESPACE_NAME,       DBF.TOTALSPACE "总量(M)",       DBF.T ...