脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 网页编辑器 → CKEditor

CKEditor网页编辑器 中文使用说明

 更新时间：2010年04月21日 21:19:49   作者：  
安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。多测试。
安装
安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。
1.从我们的网站https://www.jb51.net/codes/21295.html上下载CKEditor的最新版本。
2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。
注意：你也可以将这些文件放在你网站的任何一个地方，默认为“ckeditor”。
测试你的安装
编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。访问如下的地址进行测试：
http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html
例如：
http://www.example.com/ckeditor/_samples/index.html
集成
有苦干个方式能将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>

第三步：保存编辑器内容数据
按照先前的描述，编辑器正如一个文本区域（textarea）一样工作，所以，当提交一个包含一个编辑器实例的表单时，他的数据也将是很简单的传递，用文本区域（textarea）的名称作为健名来接收数据。举个例子，按照上面的例子，在PHP中我们需要像这样来处理数据：
复制代码 代码如下:

<?php
$editor_data = $_POST[ 'editor1' ];
?>

客户端数据处理
一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditor API就足以轻松获取编辑器实例中的内容。例 如：
复制代码 代码如下:

<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>

完整例子
复制代码 代码如下:

<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>
您可能感兴趣的文章:

相关文章

  • 轻松实现 CKfinder进驻CKEditor3.0

    轻松实现 CKfinder进驻CKEditor3.0

    看完YaSin写得“将CKfinder 整合进 CKEditor3.0 ”之后，我总觉得问题有点复杂，尤其是修改压缩了的js文件。
    2010-01-01
  • nicedit 轻量级编辑器 使用心得

    nicedit 轻量级编辑器 使用心得

    NicEdit是一个轻量级，跨平台，内置内容编辑器，允许在浏览器中轻松地编辑网站上的内容。
    2009-06-06
  • 百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

    这篇文章主要介绍了百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换,需要的朋友可以参考下
    2017-03-03
  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程

    针对PHP环境下Fckeditor编辑器上传图片配置详细教程

    今天介绍Fckeditor上传图片功能在PHP中的配置方法，涉及Fckeditor上传图片的上传路径配置、限制Fckeditor上传图片大小设置、Fckeditor上传图片文件名重名及乱码解决方法以及针对上传图片添加水印功能的实现方法，只要掌握了以上四点，Fckeditor在大部分PHP类型网站中的应用都能解决
    2014-04-04
  • asp.net 为FCKeditor开发代码高亮插件实现代码

    asp.net 为FCKeditor开发代码高亮插件实现代码

    昨天已经将BlogEngine的可视化编辑器换成了FCKeditor，作为一个程序员，在博客中插入代码是很重要的一块。网上现有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到InsertCode的目的。这个方法非常麻烦，当要使用FCKeditor新版本时都要重新修改这两个文件，非常影响我们的效率。
    2008-08-08
  • CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

    CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

    一般来说，我们在编辑内容时，先是读入到 textarea，再将 textarea 的内容赋给编辑器。
    2010-03-03
  • fckeditor 插件实例 制作步骤

    fckeditor 插件实例 制作步骤

    一：基于对话框的插件：一步一步创建基于对话框的fck插件。
    2009-06-06
  • 添加FCKeditor插件需要注意的地方

    添加FCKeditor插件需要注意的地方

    今天,在做程序的时候发现 FCKeditor功能并不强大(开始还不知道可以用插件,汗~),至少没有上传视频,专辑,音乐,水印等功能(以前我也修改过DVBBS的编辑器,也自定义了很多使用按钮).
    2009-11-11
  • jsp Ewebeditor使用说明

    jsp Ewebeditor使用说明

    一、部署方式： 1、直接把压缩目录中的文件拷贝到您的网站发布目录下； 2、配置对应WEB-INF下文件，把eWebEditor文件夹下WEB-INF/web.xml中
    2008-10-10
  • FCKeditor .NET的配置、扩展与安全性经验交流

    FCKeditor .NET的配置、扩展与安全性经验交流

    FCKeditor是使用非常广泛的HTML编辑器，本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展（如自定义文件上传子目录、自定义文件名、上传图片的后期处理等）、以及安全性进行初步的阐述。
    2011-08-08

最新评论