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; } }

　　这样就能够方便的上传到腾讯云了，其实本质上就是把其内部的部分源码注释掉，修改成本身的上传方法，同时返回一样的回调让文本编辑器可以识别，这样就完成整个过程。修改以后无论阿里云百度云只要用其对应的接口均可上传上去，本文的腾讯云只是一个例子，以不变应万变才是王道。