`

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://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html
例如:

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

#

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

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

<script type=”text/javascript” src=”/ckeditor/ckeditor.js”></script>
</head>
# 用以上方式加载,CKEditor JavaScript API 就准备就绪,可以使用了。
#

# 第二步:创建一个编辑器实例
# CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域,但用 文本区域要实现同样的效果,并不容易,它需要用户输入html代码。
但是,实际上,CKEditor仍然是使用一个文本区域来传递它的数据到服务 器上,这个文本区域对使用者来说是不可见的,所以,你必需创建并编辑一个实例,首先创建一个实例:
# <textarea name=”editor1″>&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
# 注意,如果你想要加载一些数据到编辑器中,例如从数据库中读出数据,只需要把数据放在文本区域(textarea)内就可以了,就像上面的例子一 样。在这个例子中,我们已经将文本区域(textarea)命名这“editor1”.当接收POST提交的数据时,这个名字将被用在服务器操作。现在, 开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换(replace)”这个普通的文本区域(textarea),为此一段JavaScript命令是必须的:
# <script type=”text/javascript”>
CKEDITOR.replace( ’editor1’ );
</script>
# 上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程,但是在这种 情况下你需要对“window.onload”事件进行监听:
# <script type=”text/javascript”>
window.onload = function()
{
CKEDITOR.replace( ’editor1’ );
};
</script>
#

# 第三步:PHP保存编辑器内容数据
# 按照先前的描述,编辑器正如一个文本区域(textarea)一样工作,所以,当提交一个包含一个编辑器实例的表单时,他的数据也将是很简单的传 递,用文本区域(textarea)的名称作为健名来接收数据。举个例子,按照上面的例子,在PHP中我们需要像这样来处理数据:
# <?php
$editor_data = $_POST[ ’editor1’ ];
?>
#

# 客户端数据处理
# 一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如:
# <script type=”text/javascript”>
var editor_data = CKEDITOR.instances.editor1.getData();
</script>
#

# CKEditor安装配 置完整例子
# <html>
<head>
<title>Sample – CKEditor</title>
<script type=”text/javascript” src=”/ckeditor/ckeditor.js”></script>
</head>
<body>
<form method=”post”>
<p>
My Editor:<br />
<textarea name=”editor1″>&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
<script type=”text/javascript”>
CKEDITOR.replace( ’editor1’ );
</script>
</p>
<p>
<input type=”submit” />
</p>
</form>
</body>
</html>这里主要介绍了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']
];
*/
分享到:
评论
1 楼 qianqingjiayou 2013-05-14  
您好,请问这个ckeditor我如何实现自己的一些在原有基础上的扩展,我之前在官网上下载了并且在一个项目中加入,使用了一段时间后发现我想利用它作一些扩展却不是很容易,我不知道应该改什么地方。请问您有没有什么好的经验可以告诉我,谢谢。

相关推荐

    FCKEditor在线编辑器

    FCKEditor是一款强大的开源在线文本编辑器,专为网页开发者设计,用于在Web应用程序中提供类似于桌面文字处理软件的编辑体验。它支持多种浏览器,包括Internet Explorer、Firefox、Chrome和Safari,使得用户可以在...

    FCKEDITOR php 在线编辑器

    **FCKEditor PHP 在线编辑器详解** FCKEditor是一款功能强大的开源富文本在线编辑器,广泛应用于网页内容编辑和管理。它支持多种服务器端语言,包括PHP、ASP和JSP,使得开发者能够轻松地在网页上实现类似Word的文本...

    FCKeditor2.3在线编辑器

    **标题:“FCKeditor2.3在线编辑器”** **一、FCKeditor简介** FCKeditor是一款开源的JavaScript富文本编辑器,它允许用户在网页上进行类似于Word的文本编辑操作,支持多种浏览器,包括IE、Firefox、Chrome、Safari...

    fckeditor编辑器 (已配置好)

    **FCKeditor编辑器简介** FCKeditor是一款开源的网页文本编辑器,它允许用户在浏览器端进行富文本编辑,提供了类似Word的编辑界面,支持多种格式的文本内容输入,如HTML、CSS样式等。这款编辑器在Web开发中被广泛...

    FCKeditor在线编辑器

    **FCKeditor在线编辑器详解** FCKeditor是一款开源的Web富文本编辑器,它允许用户在网页上进行类似于Word的文本编辑操作。这款编辑器诞生于2003年,由Fernando Gómez在PHP环境下开发,后来发展为支持多种编程语言...

    fckeditor在线编辑器

    1. 创建一个HTML表单,包含FCKeditor编辑器和提交按钮。 2. 编写JavaScript函数,处理表单提交事件,获取编辑器内容并使用AJAX发送到PHP处理脚本。 3. PHP脚本接收数据,保存到数据库,并返回操作结果。 ### 注意...

    fckeditor在线编辑器【好用,不过时】.rar

    Fckeditor以其易用性和高效性,与当今流行的百度富文本编辑器(UEditor)和KinEditor等编辑器一样,提供了丰富的文本格式化选项,满足了开发者和网站管理员对于内容创作和管理的需求。 首先,**Fckeditor**的核心...

    FCKeditor文件上传漏洞及利用-File-Upload-Vulnerability-in-FCKEditor1

    FCKeditor是一款开源的所见即所得(WYSIWYG)文本编辑器,由CKSource开发,可集成到Web应用程序中,为终端用户提供类似文字处理器的界面。该编辑器支持多种服务器端语言,如ASP、ASP.NET和PHP等。其中,PHP上传模块...

    fckeditor php使用配置

    这有助于提升编辑器与网站整体设计的一致性。 通过以上步骤,你可以在PHP项目中成功配置并使用FCKeditor。不过,FCKeditor已停止更新,当前推荐使用其后续项目CKEditor,它提供了更多功能和更好的兼容性。尽管如此...

    fckeditor 文字编辑器

    随着Web技术的不断进步,FCKeditor逐渐被更现代化的富文本编辑器所取代,如CKEditor(FCKeditor的升级版)、TinyMCE等。这些新的编辑器提供了更好的性能、更多的定制选项和对现代Web标准的全面支持。 总的来说,...

    fckeditor文本编辑器

    FCKeditor是一款曾经非常流行的开源富文本编辑器,它主要用PHP语言开发,适用于Web应用,为用户提供了一个类似Microsoft Word的在线编辑体验。这款编辑器在2003年由Fernando Gietz创建,因其易用性和丰富的功能而受...

    ckeditor_3.6.2在线编辑器

    这个编辑器的核心是FCKeditor的后续版本,FCKeditor是一款广泛使用的开源文本编辑器,而`ckeditor`是其发展进化后的品牌名称。`ckeditor_3.6.2` 是该编辑器的一个特定稳定版本,它包含了众多增强和改进,以提升用户...

    CKeditor在线文本编辑器

    CKeditor是一款广泛应用于网站开发的开源在线文本编辑器,它为用户提供了一个类似Word的富文本编辑体验,使得在网页上创建、编辑和格式化文本变得简单易行。CKeditor以前称为Fckeditor,随着时间的推移,它不断进化...

    FCKeditor 网页文字编辑器

    3. **版本更新**:FCKeditor已停止开发并推荐使用其后续项目CKEditor,因此在新项目中应考虑使用更现代、维护更新的编辑器。 4. **性能优化**:大型文档编辑时,可能会影响页面加载速度,可通过优化配置或使用懒...

    CKEditor一般指FCKEDITOR

    FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型...

     FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器

    1. **安装**:下载FCKeditor后,解压到服务器目录,按照官方文档进行配置,包括设置编辑器路径、指定语言包等。 2. **实例化**:在网页中引入FCKeditor的JavaScript文件,通过JavaScript代码创建编辑器实例。 3. *...

    php168 整站系统与ckeditor整合指南

    在网页内容编辑中,CKEditor是一款强大且功能丰富的文本编辑器,它源自FCKeditor的重写,提供了一个灵活、可扩展的API接口。CKEditor的新特性是基于插件的架构,允许用户根据需求自定义编辑器的功能。然而,值得注意...

Global site tag (gtag.js) - Google Analytics