ckeditor4.10 整合ckfinder3.5.1

ckeditor是一款非常好的富文本编辑器，我们可以用来写文章。ckfinder是一个非常好的文件管理工具。本文将介绍它（ckeditor 4.14.0;ckfinder 3.5.1）的基本使用，以及如何与ckfinder 整合使用。

1.从官网(https://ckeditor.com/ckeditor-4/download/) 下载最新版本，解压后加入到项目中。

2.引入js文件，创建一个textarea并初始化

<textarea id="editor1" name="editor1" rows="10" cols="80" ></textarea> 
var editor = CKEDITOR.replace('editor1');

此时一个编辑已经可以工作了。如下图：

3.不过toolbar看起来非常的杂乱，我们更改配置并去掉一些基本用不到的让它变的漂亮一些。布局可以通过下载的 samples\toolbarconfigurator中自定义选择和配置，配置好后更改config.js

CKEDITOR.editorConfig = function( config ) {

    config.toolbarGroups =[
       // { name: 'clipboard', groups: [ 'undo'] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'editing', groups: [ 'selection', 'spellchecker', 'find', 'editing'] },
        { name: 'insert', groups: [ 'insert' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] },
        { name: 'tools', groups: [ 'tools' ] }
    ];

};

4.获取编辑器内容

var content = CKEDITOR.instances.editor1.getData();
var plainText= CKEDITOR.instances.editor1.document.getBody().getText(); //取得纯文本

5.添加一些额外的插件，如：代码高亮显示codesinppet ,在https://ckeditor.com/cke4/addons/plugins/all上直接下载，下载成功后放到ckeditor/plugins下，加入配置信息

config.extraPlugins= 'codesnippet';
config.codeSnippet_theme= 'obsidian';

6.整合ckfinder 同样在官网https://ckeditor.com/ckfinder/download/下载，解压后放入项目中即可。3.5.1版本使用yml文件配置文件管理信息。如果是测试使用我们只需要 修改下他的存储目录即可

backends:
  - name: 'default'
    adapter: 'local'
    baseUrl: 'http://localhost:8080/userfiles/'              #文件访问基础路径
    root: 'D:/zlennon/userfiles/'                            #文件存放目录
    disallowUnsafeCharacters: true
    forceAscii: false
    hideFolders: ['.*', 'CVS', '__thumbs']
    hideFiles: ['.*']
    htmlExtensions: ['html', 'htm', 'xml', 'js']
    overwriteOnUpload: false
    useProxyCommand: false

在web.xml中配置servelt

<servlet>
	<servlet-name>CKFinder</servlet-name>
	<servlet-class>com.cksource.ckfinder.servlet.CKFinderServlet</servlet-class>
	<init-param>
		<param-name>scan-path</param-name>
		<param-value>com.example.ckfinder</param-value>
	</init-param>
	<multipart-config>
		<location>/</location>
		<max-file-size>5242880</max-file-size><!--5MB-->
		<max-request-size>20971520</max-request-size><!--20MB-->
		<file-size-threshold>0</file-size-threshold>
	</multipart-config>
</servlet>
<servlet-mapping>
	<servlet-name>CKFinder</servlet-name>
	<url-pattern>
		/ckfinder/*
	</url-pattern>
</servlet-mapping>

在ckeditor中初始化ckfinder,并在ckeditor的config.js中配置ckfinder的位置

 CKFinder.setupCKEditor( editor, '/ckfinder/' );

//config.js
let filePath = "";
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth()+1)>9?date.getMonth()+1:"0"+(date.getMonth()+1);
let day =date.getDate();
filePath ="/"+year+month+day ;
config.filebrowserBrowseUrl= '/plugins/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl =  '/plugins/ckfinder/ckfinder.html?type=Image' ;
config.filebrowserFlashBrowseUrl =  '/plugins/ckfinder/ckfinder.html?type=Flash' ;
config.filebrowserUploadUrl =  '/ckfinder/connector?command=QuickUpload&type=Files&currentFolder='+filePath;
config.filebrowserImageUploadUrl =  '/ckfinder/connector?command=QuickUpload&type=Images&currentFolder='+filePath ;
config.filebrowserFlashUploadUrl =  '/ckfinder/connector?command=QuickUpload&type=Flash&currentFolder='+filePath;

这样文件管理器以配置完成，点击图像图标，我们可以看到如下的界面：

怎么样，看着还不错，不过链接tab和高级tab基本没用，还有预览窗口一堆不知所云的内容看起来非常不爽，所以我们稍微修改下。在ckeditor/plugins/image下的image.js中搜索这段话并设置为""。然后去掉tab:

config.removeDialogTabs='image:advanced;image:Link';

这样我们就完成了ckfinder的整合。

7.添加插件 https://ckeditor.com/cke4/addons/plugins/all 下载需要的插件包解压到ckeditor\plugins 下，

 然后在config.中加入插件   config.extraPlugins= 'emojione,codesnippet'; 需要注意的是可能需要下载依赖的插件