CkEditor+ckfinder实现图片上传（JSP），入门学习之路

CkEditor+ckfinder的强大不用多说，捣鼓许久，实现了两者的整合。在捣鼓过程中也遇到了不少问题，浪费很多不必要的时间，这里我会超级详细的介绍学习过程，完全不用担心看不懂，希望我的分享能对大家有所帮助，同时，我也会附上代码，方便大家使用。

第一步：下载CkEditor+ckfinder

简单介绍一下，CkEditor是一个富文本编辑器，有图片上传的功能，但使用起来比较麻烦。而ckfinder在文件上传下载方面有很大优势，弥补其不足之处。

CkEditor的下载，我选择的是4.12版本，不是最新，但足够使用。可以在官网下载：CKEditor 4 - Download Latest Version，建议选择full-package版本，‘easy image’选项不勾选。

当然，也可以通过该链接下载：CKeditor4.12版本+ckfingder破解版本.zip_免费高速下载|百度网盘-分享无限制（建议使用该链接）

Ckfinder的下载，这个是收费插件，如果不购买，使用会一直提示，你可以选择官网下载然后破解（额，这个我都还不会）。所以，直接使用链接下载吧：CKeditor4.12版本+ckfingder破解版本.zip_免费高速下载|百度网盘-分享无限制（链接失效请留言）
 

第二步，创建JAVAWeb应用

将两个解压的文件夹，放入WebRoot文件夹，保证同一层级关系，如左图所示：这里有两个注意点：

1.如果从官网下载，注意我ckeditor的目录路径，有一点修改。
2.文件报错，这个问题，没遇到就算了。刚开始以为是编码问题，设置了UTF-8，没用（建议还是设置一下UTF-8，我的默认就是GBK，从这里进去设置project->properties），该错的还是要错。文件从官网下载，按理说不会错的，而且检查它的错误，也看不出所以然，换多个版本下载也同样报错。

最后选择了妥协的方法，让Myeclipse不检查这些错误，很多看不懂的Js文件报错都可以用这种方法。
对着项目右键->Myeclipse->Run Valiadation

然后对着有错的文件打勾就好了，Myeclipse不会检查这些选中文件的错误。具体可以看下面两张图：

第三步，CKeditor的配置和使用

CKeditor的使用

CKeditor不配置也能使用，所以先使用着吧，能用一切就都好说（这里我建议去Samlple文件看看，里面有一些例子，帮助理解，ckfinder文件夹里面也同样有例子，都可以看看）

CKeditor使用比较简单，就三点：第一，引用ckeditor.js文件；第二，在textarea标签里面使用CKeditor；第三，CKeditor的实例化。

（1）引用ckeditor.js文件：<script type="text/javascript" src="ckeditor412/ckeditor.js"></script>

（2）用一个textarea标签，form表单方便接收数据

 <form >

            <textarea name="editor1" id="editor2" >

            This is my textarea to be replaced with CKEditor.

            </textarea><br>

  </form>

（3）实例化CKeditor，前面只是textarea标签，实例化的目的是，能够使用CKeditor。实例化有多种途径，这里通过写一个JavaScript实现，直接放在ckeditor.js文件的引用下面就好了

<script type="text/javascript">

    var editor = null;

    window.onload = function() {

        editor = CKEDITOR.replace( 'editor1' );     //注意，这里editor1是name属性，使用textarea的时候，被CKeditor替代。