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


 php


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

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

thinkphp ueditor

紅帽哥布林 9 years, 9 months ago

LZ如果不想折腾用这个吧

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

dainooo answered 9 years, 9 months ago

我用的是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

爱德づ咖啡 answered 9 years, 9 months ago

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

温柔美丽袁小青 answered 9 years, 9 months ago

Your Answer