Ueditor文本编辑器的自定义上传路径使用以及其回显
在页面中我们有时候需要图文编辑来记录用户的多样化输入比如博客园的TinyMCE编辑器，由于项目用到的是ueditor所以记录一下其中的坑以及解决办法，详细的资料可以参考http://fex.baidu.com/ueditor/。
首先去官网http://ueditor.baidu.com/website/download.html下载项目代码，由于本人是php后台所以就是下载php版本。然后把整个文件夹都拷贝到你的项目中去，不要因为官网的演示中只引用了ueditor.config.js和ueditor.all.js而只移动这两个js因为这些文件都是相互关联的，就按现在的结构整个文件夹都拷贝即可(下图为官网演示)。
文件夹移动好后就准备开始实例化一个Ueditor：在html中先定义一个div包含整个ueditor，然后根据自己的项目路径来引入对应的配置js文件,最后
通过UE.getEditor(id,[options])来创建一个ueditor，id为上面定义的id，options为初始化选项，我的选项中toolbars代表出现哪些图标,initialFrameHeight和
initialFrameWeight代表初始化时的编辑器大小，添加成功后的页面对应下图。
<div> <!-- 加载编辑器的容器 --> <script id="container" type="text/plain"></script> <!-- 配置文件 --> <script type="text/javascript" src="../ueditor/ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="../ueditor/ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor('container',{ toolbars: [ [ 'undo', //撤销 'bold', //加粗 'italic', //斜体 'underline', //下划线 'strikethrough', //删除线 'formatmatch', //格式刷 'selectall', //全选 'print', //打印 'link', //超链接 'unlink', //取消链接 'fontfamily', //字体 'fontsize', //字号 'simpleupload', //单图上传 'insertimage', //多图上传 'help', //帮助 'justifyleft', //居左对齐 'justifyright', //居右对齐 'justifycenter', //居中对齐 'justifyjustify', //两端对齐 'forecolor', //字体颜色 'backcolor', //背景色 'touppercase', //字母大写 'tolowercase', //字母小写 ] ], initialFrameWidth:700,//宽度 initialFrameHeight :320,//高度 }); </script>
</div>
编辑器在页面上显示出来了，接下来我们就要获取里面的数据了。首先科普一下编辑器里的图片是即时上传的，只要你把图片拉进去图片就上传到服务器了，随后返回一个路径分配给图片的src属性。而且官方文档对于上传路径的解释是相对于网站根目录路径，不能上传到云存储如腾讯云的内存里，所以当项目有几台服务器负载均衡时服务器之间互相拉取图片资源是个大坑有木有，不过自定义上传路径这个问题我放在最后解决，先按正常的思路来。
所以我们先开始学习获取数据吧：官方文档为我们提供了两种常用的方式获取数据，首先我们把样例数据写在编辑器里：
然后获得数据，方法一：ue.getContent()-----------获取带html标签的一段内容，其结果如下:
这段字符串可以直接保存在数据库的字段里，到时候取出来可以直接原样的回显到网页上。
方法二：ue.getPlainTxt() --------------------------获取带格式的文本内容，其结果如下：
这种格式的文本主要用于区分文字和img标签来取得对应部分的内容，因为我要在移动端显示时不可能继续沿用html的标签，所以只有对文字和图片分别处理、获值、最后重新排列显示在移动终端上。在取值时对“<”和“>”分别进行分割，在对src进行分割最后才能取到值，相对麻烦。
好了，我们现在已经取到值存到数据库了。新的问题来了，一旦用户要重新编辑文本编辑器内的内容，就要让数据回显到页面上。假如我们php后端从数据库里取得变量为 $content="<p>你好啊<br/></p><p><img src="/server/ueditor/upload/image/demo.jpg" title="" alt="demo.jpg" /></p>"
当你在编辑页面用之前的方法实例化一个ueditor并用其
ue.ready(function()
{
ue.setContent('{{$content}}');//这里的{{$content}}是我的框架前端页面调用后端数据的方法，根据个人情况不同进行调整
});会发现页面上显示的都是带标签的文字而不是回显的数据如下图所示
造成这种现象的原因是$content从后端数据库传到前端时经过转义了，所以要让数据回显，就先定义一个input使其值等于$content（第一层解析），然后你再获取input.val()就可以了（第二层解析），具体代码如下：
先定义一个type='hidden'的input
<input id='temp' type='hidden' value='{{$content}}' />
然后在ue.ready()里设置setContent()的值,这样就可以让数据成功显示在编辑器里了。
<script>
//ue实例化之后
ue.ready(function()
{
ue.setContent($("#temp").val());
});
</script>
OK！数据显示完了，现在再回来讨论自定义上传路径的问题，由于文档里显示上传的目录都是相对于网站的根目录，无法上传到腾讯云供多台服务器共享，所以沿着这个思路去研究一下他的上传方法，于是在Uploader.class.php里找到了upFile()方法，
这个方法里最后几行写了上传的路径，如果你要把资源上传到腾讯云就把这几行注释掉，换成一个自己写的方法
return $this->uploadCos($file['tmp_name']);
然后在这个类中定义一下自己写的方法uploadCos();
private function uploadCos($file_tmp_name)
{ // 腾讯云bucket $bucket = '你的bucket名称'; // 长签名 $expired = time() + 3600; // 生成长签名,Auth为腾讯云sdk的类，需要require到本文件中 $sign = Auth::appSign($expired,$bucket); // 请求时间限制，Cosapi为腾讯云sdk的类，需要require到本文件中 Cosapi::setTimeout(100); //腾讯云目录 $dir = '你的目录'; //上传文件名 $file = str_replace(' ','_',ltrim(microtime(),'0.')).$this->fileType; //组合新的完整上传路径 $dst = $dir.$file; //先让$localImage被赋值为$file_tmp_name $localImage = $file_tmp_name; // 腾讯云上传接口 $info = Cosapi::upload($bucket,$localImage,$dst); // 上传回调 if($info['code'] == 0) {
//提示上传成功
$this->stateInfo = $this->stateMap[0]; //把新的url地址赋给图片的src属性 $this->fullName = $info['data']['access_url']; return true; } else {//提示上传失败 $this->stateInfo = $this->getStateInfo("ERROR_FILE_MOVE"); return FALSE; } }
这样就可以方便的上传到腾讯云了，其实本质上就是把其内部的部分源码注释掉，修改为自己的上传方法，同时返回同样的回调让文本编辑器能够识别，这样就完成整个过程。修改之后不管阿里云百度云只要用其对应的接口都可上传上去，本文的腾讯云只是一个例子，以不变应万变才是王道。
