CI中加入FCKeditor，亲测

xiehao

刚接触CI不久，根据论坛里FCKeditor的有关教程进行配置，结果还是总出错。大都是因为路径问题，下面总结了一下，希望对新手有所帮助。参考：http://codeigniter.org.cn/forums/thread-1475-1-1.html

Codeigniter  2.0    安装路径D:\xampp\htdocs\ci     运行地址：http://127.0.0.1/ci
FCKeditor 官网下载的2.6.6    下载后解压到D:\xampp\htdocs\ci\assets\plugins\fckeditor



1. 打开配置文件config.php，设置FCKeditor的路径与默认工具栏
D:\xampp\htdocs\ci\application\config\config.php

PHP复制代码

 
/*
|--------------------------------------------------------------------------
| FCKEditor Basepath
|--------------------------------------------------------------------------
|
| The path from your site's root in which the fckeditor folder is. Note
| this is from the site's root, not the file system root. Also note the
| required slashes at start and finish.
|
|    e.g. /fckeditor/ or /system/plugins/fckeditor/  etc...
|
*/
$config['fckeditor_basepath']    = "/ci/assets/plugins/fckeditor/";
 
/*
|--------------------------------------------------------------------------
| FCKEditor Toolbar Set Default
|--------------------------------------------------------------------------
|
| The default Toolbar set to be used for FCKEditor across your site. Leave
| as empty string or comment out if your happy enough with the standard
| default.
|
*/
$config['fckeditor_toolbarset_default'] = 'Default';
 
 

复制代码

2. 添加一个helper类：form_helper.php，内容如下：
D:\xampp\htdocs\ci\application\helpers\form_helper.php

PHP复制代码

 
<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
 
include_once( BASEPATH . '/helpers/form_helper'.EXT);
 
function form_fckeditor($data = '', $value = '', $extra = '')
{
    $CI =& get_instance();
 
    $fckeditor_basepath = $CI->config->item('fckeditor_basepath');
 
    require_once( $_SERVER["DOCUMENT_ROOT"] . $fckeditor_basepath. 'fckeditor.php' );
 
    $instanceName = ( is_array($data) && isset($data['name'])  ) ? $data['name'] : $data;
    $fckeditor = new FCKeditor($instanceName);
 
    if( $fckeditor->IsCompatible() )
    {
        $fckeditor->Value = html_entity_decode($value);
        $fckeditor->BasePath = $fckeditor_basepath;
        if( $fckeditor_toolbarset = $CI->config->item('fckeditor_toolbarset_default'))
                $fckeditor->ToolbarSet = $fckeditor_toolbarset;
 
        if( is_array($data) )
        {
            if( isset($data['value']) )
                $fckeditor->Value = html_entity_decode($data['value']);
            if( isset($data['basepath']) )
                $fckeditor->BasePath = $data['basepath'];
            if( isset($data['toolbarset']) )
                $fckeditor->ToolbarSet = $data['toolbarset'];
            if( isset($data['width']) )
                $fckeditor->Width = $data['width'];
            if( isset($data['height']) )
                $fckeditor->Height = $data['height'];
        }
 
 
        return $fckeditor->CreateHtml();
    }
    else
    {
        return form_textarea( $data, $value, $extra );
    }
}
 
 

复制代码

3. 在需要添加FCKeditor的views页面，相应位置添加如下代码，请将参数修改为自己页面对应的参数：

PHP复制代码

 
<?
$this->load->helper('form_helper');
$data = array(
              'name'        => 'content',
              'id'          => 'content',
              'toolbarset'  => 'Default',
              'basepath'    => '/ci/assets/plugins/fckeditor/',
              'width'       => '50%',
              'height'      => '200'
    );
 
echo form_fckeditor( $data,$editing['content']);
?>
 
 

复制代码

4. 修改文件上传路径：
D:\xampp\htdocs\ci\assets\plugins\fckeditor\editor\filemanager\connectors\php   修改config.php 第67行：$Config['UserFilesPath'] = '/ci/upload/' ;     //这里视安装路径而定，如果ci是安装在网站根目录的，那直接是"/upload/"
这里改好之后，别忘了在.htaccess中加入upload。

这样就可以了。
5.至于toolbar的显示形式，在D:\xampp\htdocs\ci\assets\plugins\fckeditor\fckconfig.js这个JS文件中设定。
默认有两种方式，Default和Basic。可以根据需要自行修改。把我的贴在这里。

JS复制代码

 
FCKConfig.ToolbarSets["Advanced"] = [
        ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
        ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
        '/',
        ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
        ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Style','FontFormat','FontName','FontSize'],
        ['TextColor','BGColor'],
        ['FitWindow','ShowBlocks','-','About']                // No comma for the last row.
] ;
 
FCKConfig.ToolbarSets["Default"] = [
        ['Source','Bold','Italic','Underline','FontSize','TextColor','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
        ['Link','Unlink','Anchor','Image','Flash','Table','Rule','PageBreak','Media','insertvideo','HighLighter'],
        // No comma for the last row.
] ;
 
FCKConfig.ToolbarSets["Basic"] = [
        ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
 
 

复制代码

sdink

好吧 ,我看你们发这么多.我也来一个,
集成：kindeditor  ckeditor   ueditor 库：

下载到百度找吧。分别把下载解压到/plugins/editor/目录下
如kindeditor就解压到：/plugins/editor/kindeditor/

代码:

PHP复制代码

<?php
class Editors {
        var $id = '';
        var $name = '';
        var $value = '';
        var $textarea = '';
        var $height = '300px';
        var $minWidth = '474px';
        function __construct($params = array()) {
                $this->initialize ( $params );
        }
       
        public function initialize($params = array()) {
                if (count ( $params ) > 0) {
                        foreach ( $params as $key => $val ) {
                                if (isset ( $this->$key )) {
                                        $this->$key = $val;
                                }
                        }
                }
        }
        public function ueditor() {
                $sd = '<textarea id="' . $this->id . '" name="' . $this->id . '" style="height:300px;"> ' . $this->value . '</textarea>';
                $sd .= '<link rel="stylesheet" href="' . base_url () . 'plugins/editor/ueditor/themes/default/ueditor.css" />';
                $sd .= '<script charset="utf-8" src="' . base_url () . 'plugins/editor/ueditor/editor_config.js"></script>';
                $sd .= '<script charset="utf-8" src="' . base_url () . 'plugins/editor/ueditor/editor_all.js"></script>';
                $sd .= '<script>';
                $sd .= 'var editor;';
                $sd .= 'var editor = new baidu.editor.ui.Editor();';
                $sd .= 'editor.render(\'' . $this->id . '\');';
                $sd .= '</script>';
                return $sd;
        }
        public function kindeditor() {
                $sd = '<textarea id="' . $this->id . '" name="' . $this->id . '" style="height:300px;"> ' . $this->value . '</textarea>';
                //$sd .= '<link rel="stylesheet" href="' . base_url () . 'plugins/kindeditor/themes/default/skin.css" />';
                $sd .= '<script charset="utf-8" src="' . base_url () . 'plugins/editor/kindeditor/kindeditor.js"></script>';
                $sd .= '<script charset="utf-8" src="' . base_url () . 'plugins/editor/kindeditor/lang/zh_CN.js"></script>';
                $sd .= '<script>';
                $sd .= 'var editor;';
                $sd .= 'KindEditor.ready(function(K) {';
                $sd .= 'editor = K.create(\'#' . $this->id . '\',{\'uploadJson\' : \'' . site_url ( 'swfupload/uploadjson' ) . '?watermark=1\',\'width\':\'97%\',\'minWidth\':\'' . $this->minWidth . '\',\'minHeight\':\'300px\',\'resizeType\':\'0\',urlType : \'domain\'});';
                $sd .= '});';
                $sd .= '</script>';
                return $sd;
        }
        public function ckeditor() {
                $sd = '<textarea id="' . $this->id . '" name="' . $this->id . '" style="height:300px;"> ' . $this->value . '</textarea>';
                //$sd .= '<link rel="stylesheet" href="' . base_url () . 'plugins/kindeditor/themes/default/skin.css" />';
                $sd .= '<script charset="utf-8">window.CKEDITOR_BASEPATH="' . base_url () . 'plugins/editor/ckeditor/"</script>';
                $sd .= '<script charset="utf-8" src="' . base_url () . 'plugins/editor/ckeditor/ckeditor.js"></script>';
                $sd .= '<script>';
                $sd .= 'CKEDITOR.replace(\'' . $this->id . '\',{filebrowserImageUploadUrl:\'' . site_url ( 'swfupload/ckeditorjson' ) . '?watermark=1\'});';
                $sd .= '</script>';
                return $sd;
        }
        public function getedit($params = array(), $vs = 'ueditor') {
                if (count ( $params ) > 0) {
                        $this->initialize ( $params );
                }
                $sd = $this->$vs ();
                return $sd;
        }
 
}

复制代码

把上面的代码放在你的应用目录下的的libraries下.一般是在/application/libraries/

调用：

PHP复制代码

$this->load->library ( 'editors' );
                        $eddt = array ('name' => 'message', 'id' => 'message', 'value' => '', 'textarea' => 'class="textarea"' );
                        $data ['plugins'] = $this->editors->getedit ( $eddt );
 

复制代码

しovё杺諴荝灬

晕~ 你这路径从哪里来的 我怎么找不到啊
修改文件上传路径：
D:\xampp\htdocs\ci\assets\plugins\fckeditor\editor\filemanager\connectors\php

xiehao

しovё杺諴荝灬 发表于 2011-12-26 16:49
晕~ 你这路径从哪里来的 我怎么找不到啊
修改文件上传路径：
D:\xampp\htdocs\ci\assets\plugins\fckedit ...

咱们的安装目录不一样吧。FCKeditor2.6.6     fckeditor\editor\filemanager\connectors\php

しovё杺諴荝灬

xiehao 发表于 2011-12-26 16:50
咱们的安装目录不一样吧。FCKeditor2.6.6     fckeditor\editor\filemanager\connectors\php

  晕了 我下的是最新版本ckeditor_3.6.2   呵呵   

悲剧了 php文件夹下没有
config.php  文件了

xiehao

しovё杺諴荝灬 发表于 2011-12-26 16:59
晕了 我下的是最新版本ckeditor_3.6.2   呵呵   

悲剧了 php文件夹下没有

呵呵，ckeditor自己没有上传的功能，所以俺还是选了fckeditor。

快乐的小屌丝

卡了很久