致Javdroider的C-fans：最近忙着开发网站，一直没时间写博客，加上在之前的文章中已经涉及了很多数据结构的问题，接下来要练习的应该是排序查找算法了，C语言强化系列就暂时告一段落吧，之后会继续C语言强化之旅的，毕竟编程基础永远是程序员的立猿之本！
在开发网站的过程中，需要一个在线网页编辑器来编辑新闻，于是上网收罗了一下，发现用的比较多的是CKEditor，网上的评价用户量最多，包括像我这样的纯净用户，也包括黑客，呵呵~~
网上的教程并不多，也不够系统，自己看了一下官方提供的sample文档以及个人使用经验，总结了这篇CKEditor教程，仅供参考。
列个目录，供大家对本套教程有个大体了解~
目录
1 下载安装... - 1 -
1.1 下载... - 1 -
1.2 安装... - 2 -
2 基本使用... - 3 -
2.1 在页面中添加FCKEditor控件... - 3 -
2.1.1 class="ckeditor". - 3 -
2.1.2 JS: CKEDITOR.replace( \'t2\' )- 4 -
2.1.3 Jquery. - 4 -
2.2 自定义编辑器大小... - 4 -
2.3 自定义编辑器颜色... - 4 -
2.4 自定义语言... - 5 -
2.5 内联编辑... - 5 -
2.6 自定义工具条... - 6 -
3 高级应用... - 9 -
3.1 看清CKEditor的本质... - 9 -
3.2 上传图片... - 10 -
3.2.1 修改image.js文件... - 10 -
3.2.2 修改config.js- 10 -
3.2.3 Action. - 10 -
3.3 CKEditor API- 12 -
1 下载安装
1.1 下载
直接上官网下，http://ckeditor.com/download，这是我见到的最友好的官网下载界面，清晰简洁。
进入界面后选择Full Package版本，Full版本可以调整字体大小，Standard不行，凭这一点，选择Full。
下载后的文件
1.2 安装
没有exe，直接复制到你的Web项目中就好了。这里使用JavaWeb项目作为示范。复制后的文件夹目录
2 基本使用
2.1 在页面中添加FCKEditor控件
2.1.1 class="ckeditor"
导入js库<script type="text/javascript" src="../ckeditor/ckeditor.js"></script> <textarea class="ckeditor" id="t1" name="t1" cols="80" rows="10">ddd</textarea>
运行一下，duang~文本框出来了！
2.1.2 JS: CKEDITOR.replace( \'t2\' )
<textarea class="ckeditor" id="t2" name="tx" cols="10" rows="3">sss</textarea> <script type="text/javascript">CKEDITOR.replace( \'t2\' )</script>
这里其实是使用了CKEditor的JavaScript API，在CKEditor的高级应用中会经常涉及到API的使用，这也是灵活使用CKEditor的难点。
2.1.3 Jquery
导入Jquery.js文件
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
编写如下代码
<textareaid="t2" name="tx" cols="10"rows="3">333</textarea>
<scripttype="text/javascript">
$( document).ready( function() {
$( \'textarea#t2\' ).ckeditor();
} );
</script>
搞定！2.2 自定义编辑器大小
<script type="text/javascript">
CKEDITOR.replace( \'t1\',
{
height: \'384px\',
width: \'852px\'
});
</script>
2.3 自定义编辑器颜色
<textarea class="ckeditor" id="t2" name="tx" cols="10" rows="3">444</textarea>
<script type="text/javascript">
CKEDITOR.replace( \'t2\', {
uiColor: \'#14B8C4\'
});
2.4 自定义语言
<textarea class="ckeditor" id="t2" name="tx" cols="10" rows="3">555</textarea>
<script type="text/javascript">
CKEDITOR.replace( \'tx\', {
// Load the German interface.
language: \'en\'
});
</script>
效果2.5 内联编辑
表面看上去像是普通的信息页面点击后出现编辑框
两种实现方法
1. 设置textarea的属性contenteditable="true"
2. <scripttype="text/javascript">var editor = CKEDITOR.inline( \'div1\');</script>
源码
<html> <head> <title>Insert title here</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> <link href="sample.css" rel="stylesheet"> </head> <body> <h2 id="sampleTitle" contenteditable="true"> Javdroider<br> Coming! </h2> <h3 contenteditable="true">Coming!</h3> <div name="div1"> <p>不是学霸但要让别人以为你是</p> </div> <script type="text/javascript"> var editor = CKEDITOR.inline( \'div1\' ); </script> </body> </html>
2.6 自定义工具条
有时候我们并不需要这么多的功能，提供太多的功能反而会给网站带来安全问题，那么要怎么去自定义自己的CKEditor工具条呢？
在下载文件中的/samples/index.html的右下角处点击如下链接
在页面下方可以看到如下完整的工具条配置
将其拷贝到config.js的CKEDITOR.editorConfig= function( config )函数中，然后根据需要对config.toolbar = []中的items进行修改，即可达到简化工具条和自定义排版的目的。
如下是我自己设置的配置文件
CKEDITOR.editorConfig = function (config){
config.toolbar = [
{ name: \'document\', groups: [ \'mode\', \'document\', \'doctools\' ], items: [ \'Source\', \'-\', \'NewPage\', \'Preview\' ] },
{ name: \'editing\', groups: [ \'find\', \'selection\' ], items: [ \'Find\', \'Replace\' ] },
{ name: \'styles\', items: [ \'Styles\', \'Format\', \'Font\', \'FontSize\' ] },
{ name: \'colors\', items: [ \'TextColor\', \'BGColor\' ] },
\'/\',
{ name: \'basicstyles\', groups: [ \'basicstyles\', \'cleanup\' ], items: [ \'Bold\', \'Italic\', \'Underline\', \'Strike\', \'Subscript\', \'Superscript\', \'-\', \'RemoveFormat\' ] },
{ name: \'paragraph\', groups: [ \'list\', \'indent\', \'blocks\', \'align\', \'bidi\' ], items: [ \'NumberedList\', \'BulletedList\', \'-\', \'Outdent\', \'Indent\', \'-\', \'Blockquote\', \'-\', \'JustifyLeft\', \'JustifyCenter\', \'JustifyRight\', \'JustifyBlock\', \'-\', \'BidiLtr\', \'BidiRtl\' ] },
{ name: \'links\', items: [ \'Link\', \'Unlink\', \'Anchor\' ] },
{ name: \'insert\', items: [ \'Image\', \'Flash\', \'Table\', \'HorizontalRule\', \'Smiley\', \'SpecialChar\', \'PageBreak\', \'Iframe\' ] },
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: \'document\', groups: [ \'mode\', \'document\', \'doctools\' ] },
{ name: \'clipboard\', groups: [ \'clipboard\', \'undo\' ] },
{ name: \'editing\', groups: [ \'find\', \'selection\', \'spellchecker\' ] },
{ name: \'forms\' },
\'/\',
{ name: \'basicstyles\', groups: [ \'basicstyles\', \'cleanup\' ] },
{ name: \'paragraph\', groups: [ \'list\', \'indent\', \'blocks\', \'align\', \'bidi\' ] },
{ name: \'links\' },
{ name: \'insert\' },
\'/\',
{ name: \'styles\' },
{ name: \'colors\' },
{ name: \'tools\' },
{ name: \'others\' },
{ name: \'about\' }
];
};
修改后的CKEditor得到明显的简化，只保留我需要的功能
问题来了，如果我需要在不同的地方使用不同的工具条样式呢？
解决方法很多，这里介绍一种最实用的——写多个配置文件，在不同的地方引用不同的配置文件。
当我需要使用到config_upload1.js配置文件时，只需要添加如下代码
<script type="text/javascript">
CKEDITOR.replace( \'t1\',
{
customConfig : \'../ckeditor/customConfig/config_upload1.js\'
});
</script>
如果不添加，则默认使用config.js的配置
3 高级应用
3.1 看清CKEditor的本质
要想做高级应用，首先让我们写这么个表格提交程序，来看看CKEditor都发了些什么给我们的后台服务器了。
这里使用jsp来编写。
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="../ckeditor/samples/sample.css">
</head>
<body>
<h2>sendMsg!</h2>
<form action="${pageContext.request.contextPath}/test/FCKEditor_testFCKEditor" method="post">
<textarea class="ckeditor" id="message" name="message"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>
页面效果，随便写点什么~~
点击提交，后台收到如下数据
<h1><strong>Hello,Javdroider!</strong></h1> <p><em>To be better</em></p>
顿时了然了，其实CKEditor就是把html网页发过来！
所以我们存储文件的时候也只需要把CKEditor发过来的数据存储起来，下次要显示时在读取后放在CKEditor中就可以了！3.2 上传图片
网上有个哥们写的特好，虽然是3.x版本的，但是还是非常有借鉴价值的
http://blog.csdn.net/mydwr/article/details/8669594
这里只列大纲
3.2.1 修改image.js文件
3.x版本的和4.x版本的有点不同
4.x版本修改：id:"Upload",hidden:!0改为id:"Upload",hidden:03.2.2 修改config.js
不要直接改config.js，因为也许你下一次上传文件的路径就不是这个了，按照前面说的，新建一个配置文件，然后引用！
3.2.3 Action
验证文件，保存文件到本地,这里要注意保存和读取路径
效果
选择文件，点击上传到服务器
此时再在自己定义的文件上传目录下已经可以看到文件了
编辑图像大小
点击确定插入图片
3.3 CKEditor API
先占个位，希望有能力有时间写~~
到这里已经把CKEditor的大部分常见使用介绍完了，本人会随着工作和学习继续完善此篇博文！欢迎同学们表达自己的看法！