thinkphp使用 kindEditor 附加图片上传

本文介绍如何在ThinkPHP 3.2环境中集成KindEditor 4.1.10,实现富文本编辑功能,包括图片上传及文件管理,并提供具体的JS脚本与PHP控制器代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用的kindEditor 版本为 KindEditor 4.1.10

thinkphp版本 3.2

js脚本

<script>
    var editor;
    var editor_upload = "<?=U('Home/Upload/image');?>";
    var editor_manager = "<?=U('Home/Upload/getManager');?>";
    //正文编辑器
    KindEditor.ready(function(K) {
        editor = K.create('#editor',{
            pasteType: 2,//0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
            resizeType : 1,
            allowPreviewEmoticons : false,
            uploadJson: editor_upload,
            fileManagerJson: editor_manager,
            allowFileManager: true,
            filePostName: 'upfile',
            extraFileUploadParams: {
                _token: ""
            },
            afterBlur: function () {
                this.sync();
            }
        });
        //image upload input
        (function () {
            //上传按钮
            var currentInput;//当前接收url的
            var currentPreviewImg;//预览img
            var editor = K.editor({
                uploadJson: editor_upload,
                fileManagerJson: editor_manager,
                allowFileManager: true,
                filePostName: 'upfile',
                extraFileUploadParams: {
                    _token: ""
                }
            });
            K('.uppic button').click(function () {
                var top = $('.uppic');
                var currentInput = top.find('input');
                var currentPreviewImg = top.find('img');
                editor.loadPlugin('image', function () {
                    editor.plugin.imageDialog({
                        imageUrl: currentInput.val(),
                        clickFn: function (url, title, width, height, border, align) {
                            currentInput.val(url);
                            currentPreviewImg.attr('src', url);
                            editor.hideDialog();
                        }
                    });
                });
            });
        })();
    });
</script>

 

php控制器内的代码

public function image()
    {
        if (!IS_POST) die();
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize = 3145728;// 设置附件上传大小
        $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath = './uploads/image/'; // 设置附件上传根目录
        // 上传单个文件
        $info = $upload->uploadOne($_FILES['upfile']);
        if (!$info) {// 上传错误提示错误信息
            $this->ajaxReturn(array('error' => 1, 'message' => $upload->getError()));
        } else {// 上传成功
            $this->ajaxReturn(array('error' => 0, 'url' => __ROOT__.'/uploads/image/'.$info['savepath'] . $info['savename']));
        }
    }
    //图片空间
    public function getManager()
    {
        //根目录路径,可以指定绝对路径,比如 /var/www/attached/
        $root_path = './uploads/';
        //根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/
        $root_url = __ROOT__.'/uploads/';
        //图片扩展名
        $ext_arr = array('gif', 'jpg', 'jpeg', 'png');
        //目录名
        $dir_name = empty($_GET['dir']) ? '' : trim($_GET['dir']);
        if (!in_array($dir_name, array('', 'image', 'flash', 'media', 'file'))) {
            echo "Invalid Directory name.";
            exit;
        }
        if ($dir_name !== '') {
            $root_path .= $dir_name . "/";
            $root_url .= $dir_name . "/";
            if (!file_exists($root_path)) {
                mkdir($root_path);
            }
        }
        //根据path参数,设置各路径和URL
        if (empty($_GET['path'])) {
            $current_path = realpath($root_path) . '/';
            $current_url = $root_url;
            $current_dir_path = '';
            $moveup_dir_path = '';
        } else {
            $current_path = realpath($root_path) . '/' . $_GET['path'];
            $current_url = $root_url . $_GET['path'];
            $current_dir_path = $_GET['path'];
            $moveup_dir_path = preg_replace('/(.*?)[^\/]+\/$/', '$1', $current_dir_path);
        }
        //echo realpath($root_path);
        //不允许使用..移动到上一级目录
        if (preg_match('/\.\./', $current_path)) {
            echo 'Access is not allowed.';
            exit;
        }
        //最后一个字符不是/
        if (!preg_match('/\/$/', $current_path)) {
            echo 'Parameter is not valid.';
            exit;
        }
        //目录不存在或不是目录
        if (!file_exists($current_path) || !is_dir($current_path)) {
            echo 'Directory does not exist.';
            exit;
        }
        //遍历目录取得文件信息
        $file_list = array();
        if ($handle = opendir($current_path)) {
            $i = 0;
            while (false !== ($filename = readdir($handle))) {
                if ($filename{0} == '.') continue;
                $file = $current_path . $filename;
                if (is_dir($file)) {
                    $file_list[$i]['is_dir'] = true; //是否文件夹
                    $file_list[$i]['has_file'] = (count(scandir($file)) > 2); //文件夹是否包含文件
                    $file_list[$i]['filesize'] = 0; //文件大小
                    $file_list[$i]['is_photo'] = false; //是否图片
                    $file_list[$i]['filetype'] = ''; //文件类别,用扩展名判断
                } else {
                    $file_list[$i]['is_dir'] = false;
                    $file_list[$i]['has_file'] = false;
                    $file_list[$i]['filesize'] = filesize($file);
                    $file_list[$i]['dir_path'] = '';
                    $file_ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                    $file_list[$i]['is_photo'] = in_array($file_ext, $ext_arr);
                    $file_list[$i]['filetype'] = $file_ext;
                }
                $file_list[$i]['filename'] = $filename; //文件名,包含扩展名
                $file_list[$i]['datetime'] = date('Y-m-d H:i:s', filemtime($file)); //文件最后修改时间
                $i++;
            }
            closedir($handle);
        }
        usort($file_list, array($this, 'cmp'));
        $result = array();
        //相对于根目录的上一级目录
        $result['moveup_dir_path'] = $moveup_dir_path;
        //相对于根目录的当前目录
        $result['current_dir_path'] = $current_dir_path;
        //当前目录的URL
        $result['current_url'] = $current_url;
        //文件数
        $result['total_count'] = count($file_list);
        //文件列表数组
        $result['file_list'] = $file_list;
        //输出JSON字符串
        return $this->ajaxReturn($result);
    }

转载于:https://my.oschina.net/waterPlants/blog/750544

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值