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

所属分类: 网络编程 / 网页编辑器 阅读数: 1476
收藏 0 赞 0 分享
安装
安装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>
更多精彩内容其他人还在看

为SyntaxHighlighter添加新语言的方法

因为经常要在博客里贴一些Lua代码,但是所使用的SyntaxHighlighter插件默认不支持Lua语言,所以去研究了一下如何为SyntaxHighlighter添加并激活一个新的语言,这里将过程和有同样需求的童鞋分享
收藏 0 赞 0 分享

syntaxhighlighter 去掉右上角问号图标的三种方法

syntaxhighlighter可以高亮着色显示几乎所有语言形式的源代码,还可以显示行号,是一款深受网站建设人员喜爱的工具,并且它还是免费的
收藏 0 赞 0 分享

百度编辑器ueditor前台代码高亮无法自动换行解决方法

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题
收藏 0 赞 0 分享

FCKeditor 在chrome中不显示问题

今天在使用chrome打开后台的时候,发现FCKeditor编辑器菜单等都不显示,chrome确实不适合后台使用,以后还是继续ie核心的吧
收藏 0 赞 0 分享

ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法

升级到IE9后,fckeditor在IE9里的弹出浮动层会出现bug,里面的内容不会出现。原因是IE9不支持var $=document.getElementById;这样的写法了
收藏 0 赞 0 分享

FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能
收藏 0 赞 0 分享

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入图片)

CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。
收藏 0 赞 0 分享

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

一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。
收藏 0 赞 0 分享

FCKEditor 自定义用户目录的修改步骤 (附源码)

FCKEditor 自定义用户目录的修改步骤 (附源码) ,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCKeidtor 清除编辑器内容的代码

FCKeidtor清除编辑器内容的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享
查看更多