phpstudy集成环境

 首页 > Thinkphp如何使用ueditor编辑器时

Thinkphp如何使用ueditor编辑器时

1.在使用ueditor时 加载编辑器成功，但使用图片功能时总是报错(类型:上传错误，但图片上传到目录里了)？采用的是前台加载编辑器-->serverURL:xx/xx/xx（think里写的一个上传方法）Ps:编辑器默认

2.大家是怎么通过使用tp里的upload方法接收编辑器内容 并且编辑器里图片正常显示(重点)Ps：仅仅正常引用ueditor tp控制上传思路，希望能参考下代码

ueditor是最新版的，config.js中不存在imageURL：xxx
更新：
解决了图片上传问题,upload方法采用control.php的代码(有更简洁方法，可以留言).Ps:新手
代码：

javascript $(function(){
            var ue = UE.getEditor('editor',{
                UEDITOR_HOME_URL:'__PUBLIC__/admin/ueditor/',
                initialFrameHeight:500,
                serverUrl:'{:U('Admin/Edit/upload')}'
            });
        })

phppublic function upload(){
        date_default_timezone_set("Asia/Chongqing");
        error_reporting(E_ERROR);
        header("Content-Type: text/html; charset=utf-8");
        $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("./Public/Admin/Ueditor/php/config.json")), true);
        $action = htmlspecialchars($_GET['action']);
        /*实例化上传类*/
        $upload = new \Think\Upload();
        $upload->rootPath ='./Public';
        $viewPath=__ROOT__.'/Public'; //长传后,编辑器显示路径
        switch ($action) {
            case 'config':
                $result =  json_encode($CONFIG);
                break;
            /* 上传图片 */
            case 'uploadimage':
                $upload->maxSize  =2048000;
                $upload->exts     =array('jpg','gif','png','jpeg');
                $upload->savePath ='/Uploads/img/';
                $info=$upload->upload();
                if($info){
                    $data=array(
                        'state'   =>'SUCCESS', //上传状态
                        'url'     =>$viewPath.$info['upfile']['savepath'].$info['upfile']['savename'], //返回地址
                        'title'   =>$info['upfile']['savename'], //新文件名
                        'original'=>$info['upfile']['name'], //原文件名
                        'type'    =>$info['upfile']['ext'], //文件扩展名
                        'size'    =>$info['upfile']['size'], //文件大小
                    );  
                }else{
                    $data=array(
                        'state'   =>$upload->getError(),
                    );

                }
                $result=json_encode($data);
                break; 
                .....
                if(isset($_GET["callback"])){
            if(preg_match("/^[\w_]+$/", $_GET["callback"])) {
                echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
            }else{
                echo json_encode(array(
                        'state'=> 'callback参数不合法'
                ));
            }
        }else{
            echo $result;
        }

但是这个代码只能解决图片问题，视频上传后会返回服务器错误(很不理解为啥这样)
欢迎指正 :)

我用的是Ueditor的迷你版 Umeditor。
完整定义代码如下：

<script type="text/javascript">
   $(function() {
        var um = UM.getEditor('editor', {
            toolbar: ['source bold italic underline insertorderedlist insertunorderedlist  forecolor emotion image video '],
            UEDITOR_HOME_URL: "__PUBLIC__/js/editor/",
            imageUrl: "{:U('topic/upload')}",
            imagePath: "__ROOT__/upload/attach/",

            autoClearinitialContent: true,
            wordCount: false,
            elementPathEnabled: false,
            autoFloatEnabled: false,

            textarea: 'content'
        });

    });

</script>

在里面需要定义到
UEDITOR_HOME_URL: "PUBLIC/js/editor/", //设置的是编辑器源码存放的目录
imageUrl: "{:U('topic/upload')}", //设置的是接收控制器方法。
imagePath: "ROOT/upload/attach/", //设置的是文件保存的目录
autoClearinitialContent: true, // 当鼠标焦点在输入框里面，是否自动清理Umeditor里面已定义的内容，编辑文档时候可以设置为false

后台处理文件里面：

public function upload() {
    $this->checkLogin();//检测用户是否登录，需要另外写~

    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     5*1024*1024 ;// 设置附件上传允许的大小
    $upload->autoSub  = true;
    $upload->saveName =   array('uniqid','');
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =   'upload/attach/'; // 设置附件上传根目录
    $upload->savePath = '';  // 设置附件上传（子）目录
    $upload->subName  = array('date','Ymd'); //按年月日生成目录
    // 上传文件
    $info   =   $upload->upload();
    if($info) {
       // 上传成功 获取上传文件信息
        foreach ($info as &$file) {
            //拼接出文件相对路径
            $file['filepath'] =  $file['savepath'] . $file['savename'];
        }
        //返回json数据被百度Umeditor编辑器
        echo json_encode( array(
            'url'=>$file['filepath'],
            'title'=>htmlspecialchars( $_POST['pictitle'], ENT_QUOTES ),
            'original'=>$file['savename'],
            'state'=>'SUCCESS'
        ) );
    }else{
    // 上传失败
        echo json_encode( array(
            'state'=>$upload->getError()
        ) );
    }
}


参考：http://fex-team.github.io/ueditor/#start-start

     http://www.yumufeng.com/blog/thinkphp-upload-umeditor.html

LZ如果不想折腾用这个吧

https://github.com/Nintendov/Ueditor-thinkphp

以前用过TP做项目时用到过ueditor，也遇到过图片上传出错的问题。
你的第一个问题描述得不够清楚，我记得加载ue之后，配置好上传路径，所有功能都OK(本地测试环境)。
上线之后得考虑跨域的问题，我当时就遇到这个问题。
第二个问题，ueditor文档里写得很清楚(在靠后的位置)，初始化时有个配置项，可以把图片视频等分发给你自己的处理程序，但是建议你还是用ueditor自带的上传处理程序，这样减少和你代码的耦合，以后升级也方便。

以前也不会，因为Ueditor有一个thinkphp的插件，通过看里面的代码，基本上就可以搞懂了，而且他的代码考虑了很多，值得学习，推荐这么做

【热门文章】
【热门文章】