CKeditor配置

文件上传

1. 下载PHP上传代码文件”imgupload.php”；如链接失效，直接使用文章最后的imgupload.php（与原 imgupload.php略不同）代码；
2. 把下载的 imgupload.php 文件移动到 ckeditor/plugins/image/ 里;
3. 修改 imgupload.php 里的 $upload_dir 为项目完整上传图片路径， 需要根据$_SERVER['DOCUMENT_ROOT'] 自行设定，如： /test/uploads/ckeditor/;

4. 最好紧接着 $upload_dir 下一行判断创建目录:

   if( !file_exists($_SERVER['DOCUMENT_ROOT']. $upload_dir) ) {
       mkdir( $_SERVER['DOCUMENT_ROOT']. $upload_dir, 0777, true );
   }

5. 在每个调用ckeditor的文件加上下列代码:

   CKEDITOR.replace( '此处写调用ckeditor的标签id', {
       "filebrowserImageUploadUrl": "此处写imgupload.php的路径，绝对路径"
   });

6. 最后开启ckeditor图片上传功能:

   1. 打开 ckeditor/plugins/image/dialogs/images.js ，搜索 b.config.image_previewText ，把 (b.config.image_previewText||'') 后面引号中的内容全删了
   2. 搜索 id:'Upload',hidden:true ，把 true 改成 false
   3. 引入 ckeditor.js 文件，在要使用编辑器的 textarea 加上 class="ckeditor"

7. js获取ckeditor内容:

   var content = CKEDITOR.instances.content.getData();

配置

1. 工具栏

   1. 在config.js配置，加入 config.toolbar = 'Full'

   2. 接着再加入

      config.toolbar_Full = 
      [
          ['Source','-','Save','NewPage','Preview','-','Templates'],
      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
      ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
      '/',
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
          ['Link','Unlink','Anchor'],
          ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
      '/',
      ['Styles','Format','Font','FontSize'],
      ['TextColor','BGColor']
      ];

   3. 把不需要的工具删除即可

2. 语言设置 config.language = 'zh-cn'

3. 宽高设置 config.width = 100; config.height = 100;

4. 显示原始内容，在调用ckeditor页面加上 CKEDITOR.replace( '调用ckeditor标签id', {"allowedContent": true // 关闭过滤标签} );

5. 只读方式打开ckeditor加上 CKEDITOR.config.readOnly = true

附imgupload.php代码：

<?php
// PHP Upload Script for CKEditor:  http://coursesweb.net/

// HERE SET THE PATH TO THE FOLDER WITH IMAGES ON YOUR SERVER (RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER)
$upload_dir = '/uploads/ckeditor/';

if( !file_exists($_SERVER['DOCUMENT_ROOT']. $upload_dir) ) {
    mkdir( $_SERVER['DOCUMENT_ROOT']. $upload_dir, 0777, true );
}

// If 1 and filename exists, RENAME file, adding "_NR" to the end of filename (name_1.ext, name_2.ext, ..)
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);

// HERE PERMISSIONS FOR IMAGE
$imgsets = array(
    'maxsize' => 2000,     // maximum file size, in KiloBytes (2 MB)
    'maxwidth' => 900,     // maximum allowed width, in pixels
    'maxheight' => 800,    // maximum allowed height, in pixels
    'minwidth' => 10,      // minimum allowed width, in pixels
    'minheight' => 10,     // minimum allowed height, in pixels
    'type' => array('bmp', 'gif', 'jpg', 'jpe', 'png'),  // allowed extensions
);

$re = '';

if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {
    $upload_dir = trim($upload_dir, '/') .'/';
    define('IMG_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));  //get filename without extension

    // get protocol and host name to send the absolute image path to CKEditor
    $protocol = !empty($_SERVER['HTTPS']) ? 'https://' : 'http://';
    $site = $protocol. $_SERVER['SERVER_NAME'] .'/';
    $sepext = explode('.', strtolower($_FILES['upload']['name']));
    $type = end($sepext);    // gets extension
    list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);  // gets image width and height
    $err = '';         // to store the errors

    //set filename; if file exists, and RENAME_F is 1, set "img_name_I"
    // $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, IMG_NAME .'_'. ($i +1), $ex, ($i +1));
        else return $fn .$ex;
    }

    $img_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, IMG_NAME, ".$type", 0);
    $uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $img_name;  // full file path

    // Checks if the file has allowed type, size, width and height (for images)
    if(!in_array($type, $imgsets['type'])) $err .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
    if($_FILES['upload']['size'] > $imgsets['maxsize']*1000) $err .= '\\n Maximum file size must be: '. $imgsets['maxsize']. ' KB.';

    if(isset($width) && isset($height)) {
        if($width > $imgsets['maxwidth'] || $height > $imgsets['maxheight']) $err .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgsets['maxwidth']. ' x '. $imgsets['maxheight'];
        if($width < $imgsets['minwidth'] || $height < $imgsets['minheight']) $err .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgsets['minwidth']. ' x '. $imgsets['minheight'];
    }

    // If no errors, upload the image, else, output the errors
    if($err == '') {
        if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
            $CKEditorFuncNum = $_GET['CKEditorFuncNum'];
            $url = $site. $upload_dir . $img_name;
            $msg = IMG_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 3, '.', '') .' KB \\n- Image Width x Height: '. $width. ' x '. $height;
            $re = "window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')";
        }
        else $re = 'alert("Unable to upload the file")';
    }
    else $re = 'alert("'. $err .'")';
}
echo '<script>'. $re. '</script>';

相关内容

http://www.cnblogs.com/wangyhua/p/4050563.html

http://www.cnblogs.com/Tirisfal/p/5548424.html