CKEditor装配与配置(PHP)FCKEditor在线编辑器

CKEditor安装与配置(PHP)FCKEditor在线编辑器
http://www.php8848.com/wp/zh/1700.html



什么是CKEditor？

CKEditor即大名鼎鼎的FCKeditor终于在最近发布新版本了，与增加版本号不同，这次完全把它改名了，更名为CKeditor。这 应该是和它的开发公司CKSource的名字有关吧，该公司的另一个产品为CKFinder（一个Ajax文件管理器），这次可能为了保持一致，将FCK 更改为CK，但是版本号继承了下来，为CKeditor3.0版。

FCKeditor项目已转向下一代版本命名CKEditor的产品开发，基本上采用Fckeditor并对部分进行了重新设计和采用新技术以改善 结构。最新版本是ckeditor 3.0 beta 2，这是一个全功能的测试版，它包含了我们按预期准备发布的第一个ckeditor 3.0正式版的所有功能。你现在就可以享受它令人吃惊的性能、充分无障碍和强大而可扩展的javascript API，有着你过去常常使用的fckeditor的大部分功能。

好了言归正传,我们看看CKEditor在PHP中如何安装和配置，非常简单。
# 安装
# 安装CKEditor是一件容易的工作，只需要按照下面 的简单步骤就可以完成。
1.从我们的网站http://ckeditor.com.cn上下载CKEditor的最新版本。CKEditor 3.0.1, released on 16 October 2009。
2.将下载的文件解压， 然后将4M多的文件减肥：可以删掉_samples、_source、_tests这三个无用的文件夹；打开lang文件夹，干掉除 _languages.js、en.js、zh-cn.js以外的所有文件；如果你不用office2003和v2两种皮肤，可以把skin目录下的这两 个目录也都干掉。这样下来就1M都不到了。
3.将整理好的下载文件上传到你网站根目录下的“ckeditor”文件夹里。
注意：你也可以 将这些文件放在你网站的其他任何一个地方，默认为“ckeditor”。
#

# 测试你的安装
# 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。访问如下的地址进行测试：
# http:////_samples/index.html
例如：

http://www.example.com/ckeditor/_samples/index.html

#

# 集成 （即CKEditor的安装配置）
# 有苦干个方式能将CKEditor集成到你的网页中，在这里介绍最常用的实现方法。
#

# 第一步：载入CKEditor
# CKEditor 是一个JavaScript 应用程序，你只需要在你的网页中包含一个文件引用就能加载它。如果你已经将CKEditor安装在了你网站的“ckeditor”目录，你可参照如下示 例：
#
…


# 用以上方式加载，CKEditor JavaScript API 就准备就绪，可以使用了。
#

# 第二步：创建一个编辑器实例
# CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域，但用 文本区域要实现同样的效果，并不容易，它需要用户输入html代码。
但是，实际上，CKEditor仍然是使用一个文本区域来传递它的数据到服务 器上，这个文本区域对使用者来说是不可见的，所以，你必需创建并编辑一个实例,首先创建一个实例：
# <p>Initial value.</p>
# 注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一 样。在这个例子中，我们已经将文本区域（textarea）命名这“editor1”.当接收POST提交的数据时，这个名字将被用在服务器操作。现在， 开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换（replace）”这个普通的文本区域（textarea），为此一段JavaScript命令是必须的：
#
# 上面的脚本块只能包含在网页的标签之后。也可以在标签内运行这个替换过程，但是在这种 情况下你需要对“window.onload”事件进行监听：<br># <script type="”text/javascript”"><br />window.onload = function()<br />{<br />CKEDITOR.replace( ’editor1’ );<br />};<br /></script><br>#<br><br># 第三步：PHP保存编辑器内容数据<br># 按照先前的描述，编辑器正如一个文本区域（textarea）一样工作，所以，当提交一个包含一个编辑器实例的表单时，他的数据也将是很简单的传 递，用文本区域（textarea）的名称作为健名来接收数据。举个例子，按照上面的例子，在PHP中我们需要像这样来处理数据：<br># <?php <br />$editor_data = $_POST[ ’editor1’ ];<br>?><br>#<br><br># 客户端数据处理<br># 一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如：<br># <script type="”text/javascript”"><br />var editor_data = CKEDITOR.instances.editor1.getData();<br /></script><br>#<br><br># CKEditor安装配 置完整例子<br># <br><br><title>Sample – CKEditor</title> <br><script type="”text/javascript”" src="%E2%80%9D/ckeditor/ckeditor.js%E2%80%9D"></script><br><br><br><form method="”post”"> <br><p><br>My Editor:<br><br><textarea name="”editor1″"><p>Initial value.</p>

这里主要介绍了CKEditor安装与配置的 基础的步骤(在PHP中)，让我们初步体验了FCKEditor在线编辑器的下一代的优良表现。

config.js 的配置， 可以修改textarea大小和编辑器所包含的功能

/*
Copyright (c) 2003-2010, CKSource – Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = ‘fr’;
// config.uiColor = ‘#AADC6E’;

config.width =’80%’; //宽度
config.height = 300; //高度
config.toolbar = ‘Full’;
//工具栏
config.skin = ‘v2′;
config.toolbar_Full =
[

['Source','-','Bold','Italic','Underline','Strike'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink'],
['Image','Table','HorizontalRule','SpecialChar'],
['Format','Font','FontSize'],
['TextColor','BGColor'],
['RemoveFormat']
];
};
/*
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']
];
*/