整合CKEditor到你的页面

最新推荐文章于 2024-11-02 19:19:35 发布

Yedy2000

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量1.7k

点赞数

分类专栏： java 文章标签： javascript 服务器 api html 工作 function

java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

整合CKEditor到你的页面

1

return top

有几种方式整合CKEditor到你的页面中，这个页面提供了几种实现的方式。

Power by xuan at 2009-11-03 10:13

2

return top

CKEditor 是一个JavaScript的应用程序，为了装载它，你只需要包含一个单独的文件引用到你的页面中。假设你已经安装了CKEditor在你网站的根目录下，这里有个例子：

 
< head > 
 
     ... 
 
     < script type = "text/javascript" src = "/ckeditor/ckeditor.js" ></ script > 
 
</ head >

通过上面的文件装载，CKEditor JavaScript API就可以使用了。

注意
：必须确保使用原始文件名("ckeditor.js")，来把js包含在你的页面中，如果你想用别的文件名替代，或者想把CKEditor脚本合并在另外一个JavaScript文件，请查看 Specifying the Editor Path
 。

Power by xuan at 2009-11-03 22:20

3

return top

步骤2: 创建一个Editor实例

CKEditor就像你页面中的textarea那样工作。编辑器提供了一个易用的，格式化的富文本用户界面，同样的事情也可使用textarea做到，只不过没有那么简单而已。使用textarea，就需要用户输入HTML代码了。

然而，事实是CKEditor使用textarea来转化数据以提供给服务器，textarea对于用户来说是不可见的。所以，讽刺的是，为了创建一个Editor，你必须首先创建一个textarea：

`1`	`<` `textarea` `name` `=` `"editor1"` `><` `p` `>Initial value.</` `p` `></` `textarea` `>`

注意到了吧，你想装载数据到editor中，，比如从数据库中装载。只需要把数据装入这个textarea中。就像上面的代码。

在这个例子中，我们把textarea命名为“editor1”，这个名字以后可以在以posted方式提交数据的时候在服务器使用。

现在，使用CKEditor JavaScript API。我们把textarea“替换”成我们的editor实例，需要使用下面的一段JavaScript代码

 
<script type= "text/javascript" > 
 
     CKEDITOR.replace(  'editor1' ); 
 
</script>

这段JavaScript代码必须包含在任何<textarea>出现后的任何位置上，你也可以再<head>内调用这个函数，但是你需要监听页面的"window.onload" 事件，就像这样

 
<script type= "text/javascript" > 
 
     window.onload =  function () 
 
     { 
 
         CKEDITOR.replace(  'editor1' ); 
 
     }; 
 
</script>

Power by xuan at 2009-11-03 11:26

4

return top

步骤3: 保存Editor内的数据

就像之前的描述，editor就像一个<textarea>标签那样工作，所以，当提交包含在form的editor实例是，它的数据就像通常那样提交。使用textarea的name属性来取得数据，

就像下面的php例子

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

Power by xuan at 2009-11-03 11:30

5

return top

客户数据的处理

有些应用程序(像Ajax应用程序)，需要在客户的处理所有的数据，并不数据以它自己的方式发送到服务器。这样的话，使用CKEditor API就可以很容易的取得editor的数据，例如：

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

Power by xuan at 2009-11-03 11:33

6

return top

完成示例

 
< 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 >