umeditor 使用经验分享

umeditor 使用经验分享

该父文本编辑器还是蛮强大的，这里主要介绍如何简单使用该js插件．首先第一个文件是：umeditor.config.js，该文件是配置文件，这里以图片上传为例(因为我只需要上传图片．．．．．)：

//图片上传配置区
imageUrl:"/index.php/Home/Upload/uploadFile"             
//图片上传提交地址
,imagePath:"http://wecaiquestion.oss-cn-hangzhou.aliyuncs.com/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

使用编译器搜索到这几个文本，进行修改即可，其中imageUrl表示图片上传到哪里，如果不填写具体的地址．比如http://www.lucifer.morning.start.com.cn，那么就会默认嵌套在window.href.host上，假设你的网页地址是http://www.lucifer.morning.start.com.cn，那么具体地址就是http://www.lucifer.morning.start.com.cn/index.php/Home/Upload/uploadFile．

第二个参数是图片显示的前缀，会贴合在后台传递回来的参数前，比如这里我使用的是阿里云的OSS作为文件保存，后台仅仅返回Object的名字，所以为了使图片能正常显示，还需要加上前缀，就是在这里加的．

最后一个参数就是文件上传到服务器后的名字，也就是$_FILES['file_name']，默认设置是temp_name．

为了理解方便，这里贴一段后台处理该文件上传的代码：

public function uploadFile(){
        header("Access-Control-Allow-Origin: *");
        header("Content-Type:text/html;charset=utf-8");
        error_reporting( E_ERROR | E_WARNING );
        date_default_timezone_set("Asia/shanghai");

        $callback=$_GET['callback'];
        // 这里开始就是我开始就是处理上传文件了，注意$_FILES的参数
        $imageUrl=self::$attachment->uploadObject(C('FINALE_STORE'),$_FILES['upfile']);
        $imageUrl=C('FINALE_STORE').$imageUrl;
        $imageUrl=urldecode($imageUrl);
        $info=array('url'=>$imageUrl,'state'=>"SUCCESS");
        // 到此为止，上面就是处理了文件上传，同时构建好了返回数据
        if($callback) {
            echo '<script>'.$callback.'('.json_encode($info).')</script>';
        } else {
            $this->ajaxReturn($info);
        }
    }

这里再分享一个我关于js插件的想法：那就是不要怕！原先刚开始接触这玩意的时候，那叫一个混乱，看着他的一大段代码，真的不知道他在内部到底干了什么，觉得自己以前的js知识好像在他这里完全没用，气馁了一段时间，后来没办法，你活得干吧，所以只好硬着头皮上了，结果发现，js有一点特别好，那就是即使是函数套函数，他们都有一个共同点，那就是对DOM的操作，而在其中，你可以自由的创建对该DOM的操作，而不会影响他原本js代码的运行，那么也就是说，js给了你很大的扩展空间，你不需要完全理解整个项目的运行流程，只需要在你需要的地方加上几行业务逻辑的代码就可以了，其实本质上还是js，所以，不要怕！