CKEditor3.x的介绍和使用

来源：互联网发布：网络大专文凭编辑：程序博客网时间：2024/06/13 10:44

一、简介

　　CKEditor即大名鼎鼎的FCKeditor，它终于在最近发布新版本了，与增加版本号不同，这次完全把它改名了，更名为CKeditor。这应该是和它的开发公司CKSource的名字有关吧，该公司的另一个产品为CKFinder（一个Ajax文件管理器），这次可能为了保持一致，将FCK更改为CK，但是版本号继承了下来，为CKeditor3.0版。

二、官方手册

　　官方手册地址：http://docs.cksource.com/CKEditor_3.x/Developers_Guide

三、基本的使用

　　1、先下载（下载地址：http://ckeditor.com/）、解压将其中的ckeditor文件夹放到你的网站根目录下，或者是你指定的项目中都可以，可以浏览_sample文件夹中的内容查看ckeditor的demo。

　　2、将ckeditor加载到你的页面中：

　　　　由于CKEditor是一个Javascript的应用，所有我们加载它仅需要在页面中将它引用进来：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><head>    ...    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script></head>

这样ckeditor就可以被我们使用了！

　　3、创建一个CKEditor的实例：

　　　　　CKEditor借用textarea来传输他的数据到服务器，但是这个textarea对用户是透明的，我们可以这样使用：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>

现在我们在利用EKEditor的Api来"替换"textarea成一个CKEditor实例：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><script type="text/javascript">    CKEDITOR.replace( 'editor1' );</script>

注意，这段js代码必须要在textarea html代码段加载之后执行，所有我们可以将这段直接放到<textarea>之后：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea><script type="text/javascript">    CKEDITOR.replace( 'editor1' );</script>

或者是当页面加载完成时候执行它：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><head>..<script type="text/javascript">    window.onload = function(){        CKEDITOR.replace( 'editor1' );    };</script></head><html>..<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea></html>

　　4、服务器端接收CKEditor传过来的数据：

　　同我们之前讲的一样，Ckeditor就类似于一个textarea，所我们可以在服务器端这样接收客户端POST过来的数据：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><?php　　$editor_data = $_POST[ 'editor1' ];?>

有时候，一些应用（像Ajax）需要在客户端出来ckeditor的数据，我们可以使用ckeitor的api很容易的这样做到：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><script type="text/javascript">    var editor_data = CKEDITOR.instances.editor1.getData();</script>

5、最后放一个完整的例子：

<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><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目录里的config.js，在

CKEDITOR.editorConfig = function( config )

{

};

里添加如下代码：

config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+config.font_names;

以后使用的时候就可以用中文字体了。

本文转载自： http://www.cnblogs.com/terryglp/articles/1787929.html