CKEditor3.6.4配置及在网站中的使用（一）

转载自：http://guaihubao.blog.163.com/blog/static/119235074201262155154912/

第一步：准备资料

从CKEditor的官网下载最新的编辑器文件，现在最新的版本是3.6.4下载commons-fileupload-1.2.1.jar和commons-io-1.4.jar这两个包文件

第二步：编辑器文件的精简

解压下载下载下来的压缩包文件，得到一个ckeditor文件夹。删除ckeditor目录下的_sample和_source两个文件夹删除ckeditor目录下的狼语言包中除en.js和zh_cn.js之外的所有语言包删除ckeditor根目录下CHANGES.HTML,INSTALL.HTNL,LICENSE.HTML即更新变化文件，安装指导文件和授权文件删除ckeditor根目录下的.php和.asp扩展名的文件，因为使用java环境开发的，这些用不到删除ckeditor/skin中除v2之外的两个文件夹，这个是编辑器的主题样式文件，比较喜欢使用v2那种简洁的样式，如果自行保留别的样式也可以

第三步：网站配置

将commons-fileupload-1.2.1.jar和commons-io-1.4.jar这两个jar包引入到lib中将精简完的ckeditor目录拷贝到网站的WebRoot下边在WebRoot根目录下创建UserFiles文件夹，用于保存用户上传的数据

第四步：ckeditor的配置

配置ckeditor根目录下的fonfig.js（用户主配置文件）文件

//配置ckeditor的默认语言

  config.language = 'zh-cn';

//编辑器样式

        config.skin = 'v2';

        //设置工具栏

        config.toolbar_Full = [

           ['Source','-','Save','Preview',],

           ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker', 'Scayt'],

            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

           '/',

           ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

           ['NumberedList','BulletedList','-','Outdent','Indent'],

           ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

           ['Link','Unlink','Anchor'],

           ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

           '/',

           ['Styles','Format','Font','FontSize'],

           ['TextColor','BGColor']

           ];

        //设置快捷键

        config.keystrokes = [

           [ CKEDITOR.ALT + 121 , 'toolbarFocus'], //获取焦点

           [ CKEDITOR.ALT + 122 , 'elementsPathFocus'], //元素焦点

           [ CKEDITOR.SHIFT + 121 ,'contextMenu'], //文本菜单

           [ CKEDITOR.CTRL + 90 , 'undo'],//撤销

           [ CKEDITOR.CTRL + 89 , 'redo'], //重做

           [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 , 'redo'], 

           [ CKEDITOR.CTRL + 76 , 'link'],//链接

           [ CKEDITOR.CTRL + 66 , 'bold'],//粗体

           [ CKEDITOR.CTRL + 73 , 'italic'], //斜体

           [ CKEDITOR.CTRL + 85 , 'underline'], //下划线

           [ CKEDITOR.ALT + 109 ,'toolbarCollapse']

           ]

        //设置默认字体

        config.font_defaultLabel = 'Arial';

        //设置字体种类

        config.font_names = 'Arial;黑体;宋体;仿宋;GB_2312';

        // 换行方式  

        config.enterMode = CKEDITOR.ENTER_BR;   

        // 当输入：shift+Enter是插入的标签  

        config.shiftEnterMode = CKEDITOR.ENTER_BR;

        //配置文件上传和显示路径

        config.filebrowserBrowseUrl = 'ckeditor/FileBrowse.jsp';  

        config.filebrowserImageBrowseUrl = 'ckeditor/FileBrowse.jsp?type=Images';  

        config.filebrowserFlashBrowseUrl = 'ckeditor/FileBrowse.jsp?type=Flashs';  

        config.filebrowserUploadUrl = 'ckeditor/FileUpload.jsp';  

        config.filebrowserImageUploadUrl = 'ckeditor/FileUpload.jsp?type=Images';  

config.filebrowserFlashUploadUrl = 'ckeditor/FileUpload.jsp?type=Flashs';

相应的配置都有相应的注释，在此我打开了编辑器的上传功能和浏览服务器文件功能，由于FCKEditor正式更名CKEditor之后就取消了其上传功能。将上传功能包含在一个新的组件CKFinder之中，不过是收费的。在这配置两个路径都是自己使用apache的上传功能自己写的上传扩展，因为安全性并没有写成Servlet或者使用Structs方式，而是写成了两个jsp文件。

第五步：CKEditor在网页文件中的引入

新建网页文件，html或者jsp的都可以引入<scripttype="text/javascript"src="/ckeditor/ckeditor/ckeditor.js"></script>这段javascript代码，将ckeditor引入到页面。注意不要将js文件的路径写错，不然没有办法正确调用编辑器。在页面中引入一个textarea，并调用javascript完成ckeditor对其的替换，代码片段如下：

<textareacols="80"id="content"name="content">  

    </textarea>

 <scripttype="text/javascript">  

        CKEDITOR.replace('content');  

 </script>

到此时，ckeditor就完成了在整个网站的引入，发布整个网站，ckeditor就可以使用了。可以将textarea放在一个form中进行提交，直接接收textarea的值就可以了。传过来的是整个body之间的内容，可以保存进数据库或者直接写成文件方便以后调用。如果需要上传文件或者图片什么的，就需要自己定义两个数据接口了。