php CKEditor编辑器上传图片

最新推荐文章于 2023-04-17 11:58:37 发布

快乐de馒头

最新推荐文章于 2023-04-17 11:58:37 发布

阅读量730

点赞数

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/54564749

版权

一、上传图片找不到上传按钮

解决办法：

要想出现上传按钮，两种方法

第一种：还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true，而我使用的4.3的是

id:"Upload",hidden:!0，反正改为false就行了，(遗憾的是此种方法对我这个版本不起作用)

第二种：打开config.js文件，加入下面一句话

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.php"; //待会要上传的action

二、预览显示英文

解决办法：

第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。(由于ckeditor的很多js文件都是压缩过的，格式很难看，很容易删错，所以不推荐此种方法)

第二种方法：打开config.js文件，加入下面一句话

config.image_previewText=' '; //预览区域显示内容

三、配置

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CKEditor Sample</title>
	<script src="ckeditor/ckeditor.js"></script>
</head>
<body>

<form>
    <textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor.</textarea>
    <script>
        // Replace the <textarea id="editor1"> with a CKEditor
        // instance, using default configuration.
        CKEDITOR.replace( 'editor1', {
            language: 'zh-cn',
            toolbar : 'Basic',
            //uiColor : '#9AB8F3',
            filebrowserImageUploadUrl: "upload.php?type=img"
        });
        
    </script>
</form>
</body>
</html>

服务器端处理上传（只要是需要下面的js部分）

upload.php

<?php

/*
CKEditor_upload.php 
*/
$config = array();
$config['type'] = array(
    "flash",
    "img"
); //上传允许type值
$config['img'] = array(
    "jpg",
    "bmp",
    "gif"
); //img允许后缀
$config['flash'] = array(
    "flv",
    "swf"
); //flash允许后缀
$config['flash_size'] = 200; //上传flash大小上限 单位：KB
$config['img_size'] = 500; //上传img大小上限 单位：KB
$config['message'] = "上传成功"; //上传成功后显示的消息，若为空则不显示
$config['name'] = mktime(); //上传后的文件命名规则 这里以unix时间戳来命名
$config['flash_dir'] = "/ckeditor/upload/flash"; //上传flash文件地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['img_dir'] = "/ckeditor/upload/img"; //上传img文件地址 采用绝对地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['site_url'] = ""; //网站的网址 这与图片上传后的地址有关 最后不加"/" 可留空
//文件上传
uploadfile();
function uploadfile() {
    global $config;
    //判断是否是非法调用
    if (empty($_GET['CKEditorFuncNum'])) mkhtml(1, "", "错误的功能调用请求");
    $fn = $_GET['CKEditorFuncNum'];
    if (!in_array($_GET['type'], $config['type'])) mkhtml(1, "", "错误的文件调用请求");
    $type = $_GET['type'];
    if (is_uploaded_file($_FILES['upload']['tmp_name'])) {
        //判断上传文件是否允许
        $filearr = pathinfo($_FILES['upload']['name']);
        $filetype = $filearr["extension"];
        if (!in_array($filetype, $config[$type])) mkhtml($fn, "", "错误的文件类型！");
        //判断文件大小是否符合要求
        if ($_FILES['upload']['size'] > $config[$type . "_size"] * 1024) mkhtml($fn, "", "上传的文件不能超过" . $config[$type . "_size"] . "KB！");
        //$filearr=explode(".",$_FILES['upload']['name']);
        //$filetype=$filearr[count($filearr)-1];
        $file_abso = $config[$type . "_dir"] . "/" . $config['name'] . "." . $filetype;
        $file_host = $_SERVER['DOCUMENT_ROOT'] . $file_abso;
        if (move_uploaded_file($_FILES['upload']['tmp_name'], $file_host)) {
            mkhtml($fn, $config['site_url'] . $file_abso, $config['message']);
        } else {
        
            //mkhtml($fn, "", $_FILES['upload']['tmp_name']);
            mkhtml($fn, "", $file_host);
            mkhtml($fn, "", "文件上传失败，请检查上传目录设置和目录读写权限");
        }
    }
}
//输出js调用
function mkhtml($fn, $fileurl, $message) {
    $str = '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(' . $fn . ', \'' . $fileurl . '\', \'' . $message . '\');</script>';
    exit($str);
}
?>

主要部分：

<?php
//上传过程省略。。。。

//编号
$fn=1;
//上传后图片url地址
$fileurl='/images/a.jpg';
//上传后提示信息
$message='上传成功';

$str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\', \''.$message.'\');</script>';
exit($str);

完

快乐de馒头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php CKEditor编辑器上传图片

一、上传图片找不到上传按钮解决办法：要想出现上传按钮，两种方法第一种：还是刚才那个image.js搜索“upload”可以找到这一段 id:'Upload',hidden:true，而我使用的4.3的是id:"Upload",hidden:!0，反正改为false就行了，(遗憾的是此种方法对我这个版本不起作用)第二种：打开config.js文件，加入下面一句话con
复制链接

扫一扫