CI中加入FCKeditor，亲测
本帖最后由 xiehao 于 2011-12-26 16:52 编辑刚接触CI不久，根据论坛里FCKeditor的有关教程进行配置，结果还是总出错。大都是因为路径问题，下面总结了一下，希望对新手有所帮助。参考：http://codeigniter.org.cn/forums/thread-1475-1-1.html
Codeigniter2.0 安装路径D:\xampp\htdocs\ci 运行地址：http://127.0.0.1/ci
FCKeditor 官网下载的2.6.6 下载后解压到D:\xampp\htdocs\ci\assets\plugins\fckeditor
http://codeigniter.org.cn/forums/data/attachment/album/201112/26/100123flt9t4fzc0emfwec.jpg
1. 打开配置文件config.php，设置FCKeditor的路径与默认工具栏
D:\xampp\htdocs\ci\application\config\config.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
<?phpif (!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页面，相应位置添加如下代码，请将参数修改为自己页面对应的参数：
<?
$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。可以根据需要自行修改。把我的贴在这里。
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']
] ;
http://codeigniter.org.cn/forums/data/attachment/album/201112/26/1001259ixkdxh8fm3hvvkv.jpg
本帖最后由 sdink 于 2011-12-26 16:04 编辑
好吧 ,我看你们发这么多.我也来一个,
集成：kindeditorckeditor ueditor 库：
下载到百度找吧。分别把下载解压到/plugins/editor/目录下
如kindeditor就解压到：/plugins/editor/kindeditor/
代码:
<?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/
调用：
$this->load->library ( 'editors' );
$eddt = array ('name' => 'message', 'id' => 'message', 'value' => '', 'textarea' => 'class="textarea"' );
$data ['plugins'] = $this->editors->getedit ( $eddt );
http://codeigniter.org.cn/forums/data/attachment/album/201112/26/1603342c8833ok8hxkk748.jpghttp://codeigniter.org.cn/forums/data/attachment/album/201112/26/1603341jl2dzi2tm1imkek.jpghttp://codeigniter.org.cn/forums/data/attachment/album/201112/26/160332hjajgzlh9zhcejaw.jpg
晕~ 你这路径从哪里来的 我怎么找不到啊:(
修改文件上传路径：
D:\xampp\htdocs\ci\assets\plugins\fckeditor\editor\filemanager\connectors\php
しovё杺諴荝灬 发表于 2011-12-26 16:49 static/image/common/back.gif
晕~ 你这路径从哪里来的 我怎么找不到啊
修改文件上传路径：
D:\xampp\htdocs\ci\assets\plugins\fckedit ...
咱们的安装目录不一样吧。FCKeditor2.6.6 fckeditor\editor\filemanager\connectors\php 本帖最后由 しovё杺諴荝灬 于 2011-12-26 17:03 编辑
xiehao 发表于 2011-12-26 16:50 http://codeigniter.org.cn/forums/static/image/common/back.gif
咱们的安装目录不一样吧。FCKeditor2.6.6 fckeditor\editor\filemanager\connectors\php
晕了 我下的是最新版本ckeditor_3.6.2 呵呵
悲剧了 php文件夹下没有
config.php文件了
しovё杺諴荝灬 发表于 2011-12-26 16:59 static/image/common/back.gif
晕了 我下的是最新版本ckeditor_3.6.2 呵呵
悲剧了 php文件夹下没有
呵呵，ckeditor自己没有上传的功能，所以俺还是选了fckeditor。 卡了很久:o
页:
[1]