CKEditor4.6.2 图片/Flash上传及预览 附件上传

最近做富文本编辑器，最后选用了 CKeditor，个人更喜欢这个编辑器的风格。本文将不再阐述CKeditor的基础配置，比较的简单，网上例子不少，官方的demo也有。

好，直接进入正题：

1.图片上传

网上有较多的关于CKeditor图片上传的例子，也有CKeditor + CKFinder的例子。 我只使用了CKeditor来实现。

     上图是我修改之后的图片上传界面， 首先找到  ckeditor/plugins/image/dialog/image.js 

      {
                id: "Upload",
                hidden: 0,
                filebrowser: "uploadButton",
                label: d.lang.image.upload,
                elements: [{
                    type: "file",
                    id: "upload",
                    //label: d.lang.image.btnUpload,
                    style: "height:40px",
                    size: 38
                },
                {
                    type: "fileButton",
                    id: "uploadButton",
                    filebrowser: "info:txtUrl",
                    label: d.lang.image.btnUpload,
                    "for": ["Upload", "upload"]
                }]
      },

    修改hidden:0. 这样上传的功能就出来了. 还有两个功能被我隐藏掉了，不去深究。

    选择文件以后，点击上传到服务器  调用的URL是什么呢？

    这个需要在 config.js里面进行配置：

   config.filebrowserImageUploadUrl = getProjectPath() + "/editor/uploadImage";

    这里配置的就是后台处理上传图片的URL，我使用的是jfinal.

    后台处理完图片以后，最后需要使用流输出：

   <script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction('' , '' ,'');</script>

   callFunction方法中的三个参数分别为：

    第一个参数：CKEditorFuncNum       ckeditor上传默认带入的参数  直接通过request.getParameter("CKEditorFuncNum")；获取就可以啦。

    第二个参数：URL   图片地址URL     

    第三个参数：错误信息   假如上传出错或者是在后台判断图片大小等功能， 设置这个值，就可以在上传界面弹提示该信息。 成功上传传空值即可。

  

   CKeditor接受到这个信息，如果URL有值，那么会直接跳到预览的界面了。  

   这个功能比较的简单。好，看一下最终的效果图。

   

     

    点击确定按钮，图片就会插入到编辑器的光标处了。双击编辑器中的图片又会弹出 图像信息 这个页面 ，可以手动的设置一下 宽度 高度，还挺方便。

    这个功能比较简单，就介绍到这里了。

    2.Flash上传 (支持flv的Flash上传)

    Flash的上传和图片上传对比起来差不多。好，让我们开始吧。

    首先来看一下我的Flash上传功能的图片。

   

 

  首先，和图片上传一样，先找到 ckeditor/plugins/flash/dialog/flash.js  找到那段代码开启上传的功能。 （参考上面图片上传的示例代码）

  然后就是配置config.js了：

  config.filebrowserFlashUploadUrl = getProjectPath() + "/editor/uploadFlash";

  这里配置的就是处理Flash上传的后台URL了。不再多做解释，继续往下：

  处理文件的代码我就不贴了，相信大家都能自己搞定。最主要的是不是我们上传成功以后，需要ckeditor的响应呢？还需要预览给用户看啊。

  那么这里呢，和图片上传就不太一样了。请注意了，这里不仔细看，可能会让你的Flash上传预览失败或者因为找不到视频浏览器崩溃哦。

  好，先来看一下，我的Flash上传的plugin目录：

  

 唯一多出来的就是  flvplayer.swf  播放视频的时候就需要借助到它了。网上下载一个即可。

 好，继续说如何在后台让ckeditor响应，还是使用流输出 还是那个方法 那段代码  熟悉的味道 哈哈。

 <script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction('' , '' ,'');</script>

 第一个参数 和 第三个参数 和图片上传一致，不做解释，需要了解的朋友请看上面.

 关键在于第二个参数，需要改动一下：

 "ckeditor/plugins/flash/flvplayer.swf?vcastr_file=/" + 项目名 + "视频存放路径/视频名";

  这样，ckeditor就能接收到后台传递的信息了。就可以预览视频了。

  网上有个哥们也提到说可以在flash.js里面加入这段代码，

 

  

 就是我注释掉的部分。经我测试，是有问题的，大家慎用。用我的方法，没毛病。 嘿嘿。

  不能光说不练啊，直接上效果图：

  

  大家可以看到URL，带有我们刚才说的那段代码，比较重要啊，这里。希望大家能注意。

  这里呢，点击确定 就能把视频插入到编辑器里面了。 再附两张效果图：

  

   这样，你的Flash就加入到编辑器里面了。点击 预览按钮，也不会有问题了。基本上大功告成了。

  

   

   如果有朋友有需要 我介绍 关于 附件的上传 可以评论  留言。 先给大家上一张附件上传的效果图吧。 

   功能实现起来其实比较的简单啦，这个功能，我使用了 uploadify来做，因为我需要兼容到IE8.

   本来想自己模仿着ckeditor的插件来做一个弹窗的，但是对API不熟，无奈，下面的这个弹窗是我自己做的。

   

   如果大家有更好的建议或者做法，欢迎大家交流。 

   好叻，时间关系，这篇文章先到此为止了，有点晚了。 希望能对大家有点帮助吧。最主要还是让自己加深一下印象，也留下篇文档。