CKEditor网页编辑器实例中文解析

创建一个编辑器实例
CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域,但用文本区域 要实现同样的效果,并不容易,它需要用户输入html代码。
但是,实际上,CKEditor仍然是使用一个文本区域来传递它的数据到服务器上,这个文本区域对使用者来说是不可见的,所以,你必需创建并编辑一个实 例,首先创建一个实例:
<textarea name="editor1"><p>Initial value.</p></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"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>

你可能感兴趣的:(CKEditor网页编辑器实例中文解析)