（以下内容为ZDcs手写，如非必要，请勿修改）
最近搞自己的CMS（内容发布系统），众所周知，CMS中很重要的是文本内容的发布，html中textarea标签即是做大型文本的专用标签，但是简单的 textarea既不美观功能也不强大，面对图文混编、文字效果设置更加是无能为力，因此，一款优秀的在线文本编辑器进入了我的视线——CKEditor。
原来使用过FCKeditor，功能相当完善，在业内性能评价也不错，分别有php等各语言版本，通过实例化fckeditor类来引用该编辑器，而近年来的web中胖客户端的发展提供了引用问题的另一个解决方法，因此，该公司于09年发布了CKEditor（之后简称CK），CK用JavaScript（之后简称js）重写了编辑器，通过js引用实现编辑器调用，其中好处不言而喻，不再赘言（想知道自己使用下就知道了，使用js一个调用方便，一个传参清晰，很容易体现好处），今天做好了CMS的新闻编辑模块，写下笔记，大家分享。
这张图片是做好的新闻编辑区logo是我自己哦，^o^：
我是使用一个弹出层做文本编辑器的容器，用的是simpleModel做的，非常小巧好用的ui插件，^o^，图片中的文本编辑区就是CK，是，下载出来有三种皮肤，图片中是default，另外还有office和v2形式，有尝试的自己看哈，office比较像word形式，v2的话觉得简明但略显古板。
具体使用方法：
下载好CK之后（现在最新版本是3.2.1，有1.7M左右），下载网址 http://ckeditor.com/download，下载完后1.7M的文件解压后4.83M，其中有很多可以简化删除，比如：_sample，用于放置CK的示例文件可删；_source,用于放置CK的源文件，等于是一个备份,可删；aptarner，就存储了一个jQuery的核心，因为我本身就有jQuery的调用，所以也删了；lang,存储了语言文件，保留zh_cn.js和en.js就可以了，可部分删除；其他单独的文件实际上只需要留下config.js（配置文件），ckeditor.js（核心文件）等重要文件就好了，什么.htaccess，是做访问列表的可以通过设定启用与INSTALL.html什么的都可以删掉，删删改改后留下的ckeditor就是800多K，功能完善，需要解释一下的是plugins文件夹存储的是CK的插件文件，有兴趣可以看看，部分按钮功能，如图片按钮，flash按钮设定都在里面，可以通过这些的修改改进功能。
现在我们有了简化的CK，将之放网站根目录下就可以使用了，使用方法很简单，直接调用外部js，
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
Src一定要是正确的路径，否则，无法显示。
从CK的DEMO中可以看到有两种方法进行编辑器的调用，当然前提是有个表单<form id=”news_add_form” action=”#” method=”post”>，然后在表单中中建立一个textarea标签，textarea中可添加文本，而这些文本会在载入时自动进入CK编辑区中，标签建立好后，就可以开始用编辑器进行替换了，第一种可以用在标签项中添加属性class=“ckeditor”的方式直接调用，如:
<textarea id='article_con' name='article_content' class='ckeditor'></textarea>
第二种是js实现页面载入时替换，由于我使用了jQuery，所以用jQuery的载入方式,否则用js的window.onload方法进行载入时替换,代码如下:
<script language=”javascript”>
$(function(){
CKEDITOR.replace（“article_con”）;
});
</script>
我建议使用第二种，好处我们待会说。
无论使用class还是js函数调用之后，重新载入你的页面就可以看到单调的textarea变成了好看的文本编辑区，十分方便（爱心提示：编辑器要点击新建按钮或者其他东西才能进入编辑，这是仿照如word这些编辑器的制作的,可能会对使用造成不便,所以先提醒），但是你可能发现有些按键不能使用或者功能不完善，比如插入图片功能，插入flash功能不全，这些对于图文混编十分重要；或者编辑区域与你想要的宽度、长度不相符，按键功能完善等会再说，我们先说说关于CK的一般配置。
还记得开始保留的config.js文件吗？这就是CK的配置文件，只需要添加属性，如config.height:420等，一切配置都可以在这里实现，包括简单的长宽高设定，toolbar风格，复杂的按键分布等，但我并不推荐直接修改config文件，因为毕竟可能不止一次调用，比如我在页面1要长度是300，页面2长度是400,这样如果直接修改config文件的话就可能造成混乱（当然，默认设置还是可以写进去的，使用仿照里面已有的写法），那么我们如何解决呢？
之前说过我推荐使用js函数调用的方法载入CK，原因就在这里，因为js调用中可以进行属性设定，具体方法是类似于这样：
CKEDITOR.replace(“article.content”,{
Height:400, //编辑器高度
Toolbar:basic, //编辑器风格
})
注意到了吗？这跟我们jQuery的风格很相像，十分简单明白，下面我把config其他设定项也写出来给大家参考：
代码
[css]
//字体.
font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;
Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;
//工具按钮.
toolbar=
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button',
'ImageButton','HiddenField'],
‘/’,
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',
'PageBreak'],
‘/’,
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About']
];
//宽度
width = 500;
//高度
height = 400;
//皮肤
skin=’v2′;
//背景色
uiColor = ‘#666666’；
//等等… …
[/css]
使用这些参数就可以自由控制CK了。现在我们看下使用Ck进行参数传递，因为CK的原理也是采用HTML+CSS的形式做到html页面中各种样式修改的，这些可以在点击源代码按键得知，而它的参数传递，就是直接将所有的东西包括标签包括样式，一股脑传递到表单中action属性指定的后台去，而后台（这里使用简单易懂的php进行说明，之后的代码也是php代码）就可以用:
<?php
echo $content=$_POST[“article_content”];
?>
进行接收，而且显示出来的就是用CK编辑的样式，这就是所见即所得。
当然，这些文本我是需要存储入数据库的，这样就需要进行一些处理，php当中有很好的库函数帮助我们进行这些信息的处理:
<?PHP
//使用$content表示接收到的表单数据
get_magic_quotes_gpc()?$content=htmlspecialchars（$content）:$content=htmlspecialchars(addslashes($content))；
?>
这样我们放进数据库就可以避免一些常规的错误，从数据库中提取的时候则使用相对的:
<?PHP
//使用$content表示从数据库中提取的数据
get_magic_quotes_gpc()?$content=$content:$content=stripslashes ($content))；
?>
这些代码我就不解释了，重要的只是让大家知道存储入数据库前最好进行下处理以规避异常，同时看看CK的数据传输。
说到这里，CK作为文本编辑器的功能已经全部实现了，但是这还是不够的，因为对于图文混编，很重要的图的功能没有实现，最明显的就是点开图片按钮之后，输入图片文件旁边没有实现浏览的按钮:
这是很不合理的，说明功能上还没有完善，现在我们就开始做图片等方面的功能。
浙公网安备 33010602011771号