在线html网页编辑器ckeditor的使用与配置

在项目中用到了 ckeditor 网页编辑器，现在整理记录下其使用心得，一来希望帮助有需要的朋友，二来留个笔记。

此处介绍的是当时用到的最新版ckeditor_3.6.4

一、ckeditor的基本套用

1、下载ckeditor控件

如果已经下载好了就省略此步，如果没有可以到这里下载我是用的版本http://download.youkuaiyun.com/detail/zcyhappy1314/5121538，

最新版的可以到这里下载http://ckeditor.com/download

2、在系统中引入控件

解压后将ckeditor文件夹放到项目WebRoot或WebContent（eclipse）目录下，在需要使用的页面中引入一下js文件

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

注：网上有人说这样引入不好用<script type="text/javascript" src="ckeditor/ckeditor.js"/>，自己没测试。

3、控件的套用

在网页中添加一下内容即可，textarea下面的脚本用来替换指定name文本域的，这里name='content'

 <textarea name="content">${record.content}</textarea>
  <script type="text/javascript">
             CKEDITOR.replace('content');
  </script>

当然这段脚本可以放到head标签之间，但要放到文档加载完成就触发的方法中，如window.onload()=function(){......}.

至此运行网页就可以看到ckeditor的效果了。

二、ckeditor的配置

1、配置ckeditor使其可以调整行高

下载一个ckeditor的插件即可，其名称为lineheight，可以到这里下载http://download.youkuaiyun.com/detail/zcyhappy1314/5121970

下载解压后将其放到ckeditor下的plugins目下即可

2、配置ckeditor使其可以设置中文字体

这个忘了当时是怎么配置的了，好像很容易的，在网上找的，想起来了再补上来吧

3、配置ckeditor使其可以上传图片

a、把上面提到的<script type="text/javascript">
                              CKEDITOR.replace('content');
                       </script>替换为如下

  <script type="text/javascript">
             CKEDITOR.replace('content', {
              filebrowserUploadUrl : 'ckeditor/uploader?Type=File',
              filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',
              filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash'
             });
  </script>

b、下载处理上传操作的java类（Servlet），地址http://download.youkuaiyun.com/my

下载解压后将文件夹放到src根目录下并在web.xml中注册Servlet

路径可以修改，但要保持和脚本中指定的一致。至此点击ckeditor编辑器的上传图片的图标应该就可以上传图片了，

至于上传路径，在java文件中自己修改了。

4.其它配置

还有好多其它的配置，如定制工具条等等，今个写不下去了，有机会再补吧。如果你见过关于ckeditor的更详细更全面的blog，可以给我留个地。

这个只是我的笔记，觉得不好的，可以看看这篇，写的挺全乎的http://www.cnblogs.com/Fskjb/archive/2009/11/16/1603461.html