设置图片上传网址

为 CKEDITOR.replace() 方法指定一些另外的配置选项，以便在 CKEditor 中添加上传对话框。

• 使用 filebrowserUploadUrl 配置属性指定图片上传脚本的 URL ( 'ck_upload.php' )。
• 将 filebrowserUploadMethod 配置选项设置为 'form' 。

<script>
    CKEDITOR.replace('editor', {
        filebrowserUploadUrl: 'ckeditor/ck_upload.php',
        filebrowserUploadMethod: 'form'
    });
</script>

上述配置将在 Image Properties 对话框中添加一个 Upload 选项卡。
它允许用户选择一个文件并发送到服务器端脚本进行上传。

CKEditor 插件提供了将 WYSIWYG 编辑器添加到 Web 表单上的输入字段的最简单方法。
通常，WYSIWYG 编辑器用于替换用于提交 HTML 内容的 textarea。
我们可以使用 CKEditor 插件轻松地将 WYSIWYG 编辑器添加到 textarea。

CKEditor 插件允许用户在 textarea 字段中插入 HTML 内容并将格式化的文本内容提交到服务器端。

CKEditor 的 Image 插件有助于在编辑器中插入图像。
在这种情况下，我们需要指定要插入到编辑器内容中的图像的 URL。
Image 插件不允许上传图片和插入 CKEditor。
如果要将图片上传到服务器并在编辑器内容中插入此图片，则需要将自定义图片上传功能集成到 CKEditor 中。
在本教程中，我们将向我们展示如何在 CKEditor 中上传图片，并使用 PHP 将上传的图片插入到编辑器内容中。

在开始之前，请下载 CKEditor 插件的标准包。

解压下载的 CKEditor 插件存档并将其放在根目录中。
注意：我们不需要单独下载CKEditor，所有需要的文件都包含在我们的源代码中。

上传图片到服务器 (ckeditor/ck_upload.php)

'ck_upload.php' 文件使用 PHP 处理文件上传过程。

• 指定上传目录和允许的图像属性。
• 验证图像类型和大小。
• 使用 PHP 中的 move_uploaded_file() 函数将图像上传到服务器。
• 将图像渲染为 HTML 并返回到 CKEditor。
• 如果图片上传成功，
• 上传状态将显示在警报对话框中。
• 在编辑器中插入上传的图像。

<?php 
//Define file upload path 
$upload_dir = array( 
    'img'=> 'uploads/', 
); 

//Allowed image properties  
$imgset = array( 
    'maxsize' => 2000, 
    'maxwidth' => 1024, 
    'maxheight' => 800, 
    'minwidth' => 10, 
    'minheight' => 10, 
    'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), 
); 

//If 0, will OVERWRITE the existing file 
define('RENAME_F', 1); 

/** 
 * Set filename 
 * If the file exists, and RENAME_F is 1, set "img_name_1" 
 * 
 * $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename 
 */
function setFName($p, $fn, $ex, $i){ 
    if(RENAME_F ==1 && file_exists($p .$fn .$ex)){ 
        return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1)); 
    }else{ 
        return $fn .$ex; 
    } 
} 

$re = ''; 
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) { 

    define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));   

    //Get filename without extension 
    $sepext = explode('.', strtolower($_FILES['upload']['name'])); 
    $type = end($sepext);    /** gets extension **/

    //Upload directory 
    $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio']; 
    $upload_dir = trim($upload_dir, '/') .'/'; 

    //Validate file type 
    if(in_array($type, $imgset['type'])){ 
        //Image width and height 
        list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); 

        if(isset($width) && isset($height)) { 
            if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){ 
                $re .= '\n Width x Height = '. $width .' x '. $height .' \n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight']; 
            } 

            if($width < $imgset['minwidth'] || $height < $imgset['minheight']){ 
                $re .= '\n Width x Height = '. $width .' x '. $height .'\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; 
            } 

            if($_FILES['upload']['size'] > $imgset['maxsize']*1000){ 
                $re .= '\n Maximum file size must be: '. $imgset['maxsize']. ' KB.'; 
            } 
        } 
    }else{ 
        $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.'; 
    } 

    //File upload path 
    $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0); 
    $uploadpath = $upload_dir . $f_name; 

    //If no errors, upload the image, else, output the errors 
    if($re == ''){ 
        if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { 
            $CKEditorFuncNum = $_GET['CKEditorFuncNum']; 
            $url = 'ckeditor/'. $upload_dir . $f_name; 
            $msg = F_NAME .'.'. $type .' successfully uploaded: \n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB'; 
            $re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>'; 
        }else{ 
            $re = '<script>alert("Unable to upload the file")</script>'; 
        } 
    }else{ 
        $re = '<script>alert("'. $re .'")</script>'; 
    } 
} 

//Render HTML output 
@header('Content-type: text/html; charset=utf-8'); 
echo $re;

将 CKEditor 添加到 Textarea

1. 创建一个要替换为 CKEditor 的 textarea 元素。

<textarea name="editor" id="editor"></textarea>

2.包含CKEditor jQuery插件的库文件。

<script src="ckeditor/ckeditor.js"></script>

3.使用CKEDITOR.replace()方法初始化CKEditor插件，用所见即所得编辑器替换textarea元素。

<script>
    CKEDITOR.replace('editor');
</script>