上传路径配置
文档说明
支持版本：支持 UEditor 1.4.2+ 的版本
1.4.2+ 以后路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项。
这两个配置项主要针对如下功能：
- 图片上传：imagePathFormat、imageUrlPrefix
- 涂鸦上传：scrawlPathFormat、scrawlUrlPrefix
- 截屏上传：snapscreenPathFormat、snapscreenUrlPrefix
- 附件上传：filePathFormat、fileUrlPrefix
- 视频上传：videoPathFormat、videoUrlPrefix
当前文档的例子是以 图片上传 为例介绍，其他配置方法类同。
imagePathFormat 介绍
作用：指定文件上传路径和返回路径，支持格式化
1.4.2+ 路径配置项无论是否以 "/" 开头，都是相对于 网站根目录 的路径。
例如，假设网站根目录是："D://apache/www/"，以下是 imagePathFormat 的配置值以及对应的存放目录。
"/upload/{filename}" --> "D://apache/www/upload/"
"upload/{filename}" --> "D://apache/www/upload/"
"./upload/{filename}" --> "D://apache/www/upload/"
"../upload/{filename}" --> "D://apache/upload/"
1 指定文件保存目录
上传路径可以使用根路径和相对路径，推荐使用根路径的配置。
1.1 使用 "/" 开头的根路径
imagePathFormat 参数推荐使用 "/" 开头的配置，这样的值指相对于网站根目录的位置。
例子：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "/upload/image/{filename}"，那么上传位置在 "D://apache/www/upload/image/" 目录下。
1.2 使用非 "/" 开头的相对路径
imagePathFormat 参数使用非 "/" 开头的相对路径时，上传位置也是相对于网站根目录（asp、.net例外，相对于应用程序的目录）。
例子1：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "ueditor/php/upload/{filename}"，那么上传位置在 "D://apache/www/ueditor/php/upload/" 目录下。
例子2：网站根目录是 "D://apache/www/"，imagePathFormat 参数设置为 "../upload/{filename}"，那么上传位置在 "D://apache/upload/" 目录下。
2 控制插入到编辑器的路径
2.1 后台返回路径
后台执行上传结束后，返回路径是按照 imagePathFormat 配置项替换后的字符串，原样输出到前端。
例子1：上传文件名为 123.jpg，imagePathFormat 参数设置为 "/ueditor/php/upload/{filename}"，那么返回路径是 "/ueditor/php/upload/123.jpg"。
例子2：上传文件名为 123.jpg，imagePathFormat 参数设置为 "../upload/{filename}"，那么返回路径是 "../upload/123.jpg"。
2.2 通过 imageUrlPrefix 配置项给返回路径添加前缀
有一些情况下仅仅靠返回路径是不能得到正常的图片链接，需要通过配置 imageUrlPrefix 给插入图片的路径添加前缀。
有两种情况下需要配置 imageUrlPrefix：
-
asp和.net下，应用程序目录不是网站根目录，需要给路径添加前缀。
-
在跨域上传的情况下，就需要配置imageUrlPrefix前缀。假设页面在 a.com 域下，文件上传到 b.com 域下，这样要配置 imageUrlPrefix 为 "http://b.com" 才能得到正常路径。
3 格式化上传路径和文件名
由于上传文件名容易冲突，编辑器提供了配置上传文件路径和文件名格式的方法，可以在 config.json 配置 imagePathFormat 项，后台上传文件会按照配置的格式命名。
3.1 格式化字符串的参数
{filename} //会替换成文件名 [要注意中文文件乱码问题] {rand:6} //会替换成随机数,后面的数字是随机数的位数 {time} //会替换成时间戳 {yyyy} //会替换成四位年份 {yy} //会替换成两位年份 {mm} //会替换成两位月份 {dd} //会替换成两位日期 {hh} //会替换成两位小时 {ii} //会替换成两位分钟 {ss} //会替换成两位秒
3.4 文件名冲突
当按照模板命名文件，依旧出现冲突，会直接覆盖同名文件，所以建议 imagePathFormat 使用时间戳和随机数来较少冲突。
3.5 非法字符
后台会过滤模板上的非法字符，非法字符列表如下，会替换成空：
\ : * ? " < > |
4 完整的使用例子
4.1 例子一
网站根目录是："D://apache/www/" 配置项 imagePathFormat 的值为：
imagePathFormat = "/ueditor/php/upload/image/{yyyy}-{mm}-{dd}_{rand:6}_{filename}"上传的文件名可能是这样：
"2014-06-13_712623_照片.jpg"存放的路径是：
D://apache/www/ueditor/php/upload/image
4.1 例子二
假设例子的情景如下：
网站根目录是："D://apache/www/"
上传文件名称是："123.jpg"
上传日期是：2014年06月13日
配置项 imagePathFormat 和 imageUrlPrefix 的值为：
imagePathFormat: "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
imageUrlPrefix: "http://a.com"
那么上传结果可能是这样：
上传文件命名为 "1402637667260888888.jpg"
文件上传到 "D://apache/www/ueditor/php/upload/image/20140613/" 目录下
后端返回给前端的图片链接是:
"/ueditor/php/upload/image/20140613/402637667260888888.jpg"
插入到编辑器的图片链接是:
"http://a.com/ueditor/php/upload/image/20140613/402637667260888888.jpg"
上传视频
支持版本
支持 UEditor 1.3.6+ 的版本
功能说明
视频插件添加了上传视频的功能，可以上传自己的视频到服务器，并插入编辑器。editor.getContent()获取到的编辑器的视频内容是video标签。
允许上传的视频格式
视频上传服务器，上传后台路径是fileUp.php,和上传附件一致,允许的上传格式如下：
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
输入输出过滤
1.插入到编辑器用图片占位代替，getContent得到的html内容是video标签，带有edui-upload-video的class名称。
2.setContent设置内容带有video标签,并且有edui-upload-video的class名称，会替换成图片占位符。
展示页面使用
展示页面需要引用ueditor.uparse.js文件。假如当前浏览器video标签支持当前格式，会使用video标签播放视频，否则会自动替换flash播放器，播放器使用的是videojs开源插件。
视频格式说明
下面是个浏览器视频格式要求，建议使用mp4的视频格式，兼容性较好。
各浏览器视频格式要求 --来自http://www.ckplayer.com
实例创建后为什么直接执行接口报错
场景
开发者在创建编辑器时后，会执行一些接口或者调用编辑命令，例如
这些代码看起来没有问题，编辑器实例也能正确拿到，但就是没有效果。var ue = UE.getEditor('editor'); ue.setContent('初始化的内容'); //或者调用命令 //ue.execCommand('inserthtml','内容');
UEditor创建编辑区域的原理
其实出现这种问题，其实是大家不了解UEditor的创建原理导致的。因为UEditor的编辑区域是使用iframe作为编辑容器的。所以当编辑器创建实例后，先会创建一个iframe元素，然后在iframe元素中写入一些脚本，这些脚本会在iframe元素初始化完成时被调用。脚本的作用主要是为编辑器实例赋值iframe中的body,window,document对象的引用。 看到这里，大家就应该明白UEditor的初始化过程其实是个异步过程。
因为是个异步过程。所以场景中的书写方式就会出现问题了。虽然工厂方法getEditor能正确返回编辑器实例，但同步的代码ue.setContent马上就被执行了，因为setContent是在编辑容器中写内容，这时需要用到body,document等元素，但这些元素的引用赋值却在异步中才做的赋值。所以才会出现直接执行setContent时会出现无效的问题。当然有时不同浏览器的效果会出现不同。一些高级的浏览器比如chrome有时是可以的，但大部分ie浏览器都不行。这主要是因为浏览器的性能所致的。
那正确的方式是什么呢？
正确的初始化方式
UEditor为开发者提供了ready接口，他会在编辑器所有的初始化操作都结束时调用。保证你要做的操作能在一个完整的初始化环境中执行。
UEditor的老用户会说，不是还有个addListener可以注册ready事件吗？UE.getEditor('editor').ready(function() { //this是当前创建的编辑器实例 this.setContent('内容') })确实这样写也能达到效果，但这样创建有个小问题。如果的这段代码是用在第一次创建时就没有问题。但如果编辑器已经创建，你需要再次赋值，想使用同一段代码，这时，这里的事件ready是不会触发的。但你调用接口ready注入你的操作，这种方式，会判断如果你的编辑器已经初始化完成了，那ready将会自动加载注入的内容，如果还没有初始化结束，它会自己注册ready事件，当完成初始化后再掉起自己。所以建议开发者使用ready接口作为初始化时注入操作。UE.getEditor('editor').addListener('ready', function() { //this是当前创建的编辑器实例 this.setContent('内容') })
如何自定义请求地址
本文档说明修改请求地址的方法。
应用场景
ueditor 1.4.2+ 推荐使用唯一的请求地址，通过GET参数action指定不同请求类型。 但很多用户都希望使用自己写好的上传地址，下面提供一种解决方法： 由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现，例子如下：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') { return 'http://a.b.com/upload.php'; } else if (action == 'uploadvideo') { return 'http://a.b.com/video.php'; } else { return this._bkGetActionUrl.call(this, action); } }
action类型以及说明
- uploadimage：//执行上传图片或截图的action名称
- uploadscrawl：//执行上传涂鸦的action名称
- uploadvideo：//执行上传视频的action名称
- uploadfile：//controller里,执行上传视频的action名称
- catchimage：//执行抓取远程图片的action名称
- listimage：//执行列出图片的action名称
- listfile：//执行列出文件的action名称
如何阻止div标签自动转换为p标签
背景
刚开始使用UEditor的开发者，会发现一个现象，粘贴到编辑器中的内容如果带有div标签，待粘贴到编辑器之后，会发现粘贴到编辑器中的div已经被转换为p标签了。首先这不是一个bug,这是UEditor对于进入编辑器中的数据进行的过滤处理。在UEditor中表示段落的标签是p标签，很多的编辑操作都是基于p标签进行的处理。当然我们对div标签也做了兼容性的处理，如果你想保留div标签不让UEditor进行转换也是可以的。
阻止转换
UE.getEditor('editorID', { allowDivTransToP: false })