先来看一下最终的效果图

一、编辑器界面

二、上传图片界面

<!------------------------------------------------------->

一、安装包下载，我使用的安装包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip，这两个文件可以分别到
http://ckfinder.com/download和http://ckeditor.com/download下载，注意我使用的开发语言是java，所以下载cfinder的时候需要选择的版本是ckfinder_java；

二、在Eclipse中新建一个Dynamic Web Project项目，此处省略具体步骤；

三、整合Ckeditor和Ckfinder；

　　1、解压ckeditor_3.6.3.zip，然后将ckeditor文件夹全部考到WebContent根目录下，修改ckeditor目录下的config.js文件，代码如下：

CKEDITOR.editorConfig = function( config ) {   // Define changes to default configuration here. For example:

    // config.language = 'fr';   // config.uiColor = '#AADC6E';  //配置默认配置

    config.language = 'zh-cn'; //配置语言    // config.uiColor = '#FFF'; //背景颜色    // config.width = 400; //宽度    // config.height = 400; //高度     // config.skin = 'v2'; //编辑器皮肤样式    // 取消 “拖拽以改变尺寸”功能     // config.resize_enabled = false;    // 使用基础工具栏

    // config.toolbar = "Basic";

    // 使用全能工具栏

    config.toolbar = "Full";     //使用自定义工具栏     // config.toolbar =    // [     // ['Source', 'Preview', '-'],     // ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],

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

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

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

    // ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent',     'Blockquote'],    // ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],     // ['Link', 'Unlink', 'Anchor'],    // '/',     // ['Format', 'Font', 'FontSize'],    // ['TextColor', 'BGColor'],     // ['Maximize', 'ShowBlocks', '-', 'About']    // ];    // 在 CKEditor 中集成 CKFinder，注ckfinder 的路径选择要正确。

     config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html',

     config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images',

     config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash',

     config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',

     config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',

     config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',

     config.filebrowserWindowWidth = '1000',

     config.filebrowserWindowHeight = '700'; };

　　2、解压ckfinder_java_2.3.zip，将ckfinder目录下的CKFinderJava.war解压，找到ckfinder文件夹，将其拷贝到WebContent目录下；在这一步中，simples目录和plugins/gallery/jquery.min.js会提示出错，将simples目录直接删除即可，下载最新的jquery.min.js文件替换原有的jquery.min.js文件，将不会再有错误提示；

　　3、整合jar包，把上一步中解压的war包中的jar文件拷贝到我们自己的工程中，其位置通常是：ckfinder\CKFinderJava\WEB-INF\lib；将这个目录下面的jar文件拷贝到我们的工程中的lib文件夹下，接着把config.xml和web.xml文件也拷贝到我们自己的工程中的相应位置(WebContent/WEB-INF)；

　　打开config.xml， 第二行的<enabled>false</enabled>换成：<enabled>true</enabled> ；第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>换成<baseURL>/CK/userfiles/</baseURL>注意：此处的CK是根据项目名定的。

四、在WebContent目录下新建一个editor.jsp文件；

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

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

<script type="text/javascript">

    function GetContents() {

        var oEditor = CKEDITOR.instances.editor1;

        alert(oEditor.getData());

    }

</script>

<title>编辑产品信息</title>

</head>

<body>

    <textarea id="editor1" name="editor1" class="ckeditor" rows="20"

        cols="80">&nbsp;</textarea>

    <input onclick="GetContents();" type="button"

        value="Get Editor Contents (XHTML)" />

</body>

</html>

上面的jsp文件中，有一个editor编辑器和一个按钮，按钮用于获取在editor中用户编辑添加的内容，获取到内容之后，就可以做相应的处理，比如保存内容，或者根据内容生成一个html文件，等等；

运行程序，访问editor.jsp即可看到文章开头的第一个编辑器界面；

五、附录

　　去除一些版本信息：打开ckfinder下面的ckfinder.js文件，查找<h4,此标签上添加隐藏样式style='display:none;'；

更多功能可参考安装包中的例子程序，实现个性化定制；

源码下载：http://pan.baidu.com/s/1ntumme9 密码: ig2s

Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)的更多相关文章

  1. 笨鸟先飞之Java（一）--使用struts2框架实现文件上传

    无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...

  2. java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 使用过程 和servlet差不多

    java nio 写一个完整的http服务器  支持文件上传   chunk传输    gzip 压缩      也仿照着 netty处理了NIO的空轮询BUG        本项目并不复杂 代码不多 ...

  3. java web学习总结(二十四) -------------------Servlet文件上传和下载的实现

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  4. java：ssh连接服务器，实现本地文件上传和下载

    1.连接至服务器:ssh hp@10.10.17.16 -p 5555    下载文件:scp -r hp@10.10.17.16:/ccc(服务器路径,文件夹下所有文件)  /path(本地路径) ...

  5. SpringBoot整合阿里云OSS对象存储实现文件上传

    1. 准备工作: 一.首先登录阿里云OSS对象存储控制台创建一个Bucket作为你的存储空间. 二.创建Access Keyan按要求创建进行,这里的方法步骤我就不展现出来了,你们可以自行查询阿里云文 ...

  6. Java 开源博客 Solo 1.8.0 发布 - 改进文件上传

    本次发布主要是更新了编辑器,使其更好地支持文件上传.(1.8.0 版本变更记录请看这里) 我们的 Markdown 编辑器: 另外,我们对 HTTPS 的支持也更完善了,欢迎大家试用! 简介 Solo ...

  7. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  8. java文件上传和下载

    简介 文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...

  9. Java Web(十一) 文件上传与下载

    文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将 ...

随机推荐

  1. 9.14 DP合集水表

    9.14 DP合集水表 关键子工程 在大型工程的施工前,我们把整个工程划分为若干个子工程,并把这些子工程编号为 1. 2. --. N:这样划分之后,子工程之间就会有一些依赖关系,即一些子工程必须在某 ...

  2. Sublime Text 3安装完美的Vim支持，ActualVim/NeoVim

    很多IDE和编辑器都有Vim插件用于支持Vim模式,但大多数都有些问题,拿我一直用的Idea来说,它的vim在ctrl+v后,选择多行的行前插入,如果这几行中有空行,它不会把空格算在内,所以最终是会少 ...

  3. window + office 激活方法（不提供下载）

    下载KMSTools工具,里面集成了许多激活方法. WINDOWS KMS激活方式 比较简单,随便点一个KMSTools带有KMS字样的工具就可以了,但是KMS激活方式有效期为180天,到期需要继续激 ...

  4. 【洛谷】题解 P1056 【排座椅】

    题目链接 因为题目说输入保证会交头接耳的同学前后相邻或者左右相邻,所以一对同学要分开有且只有一条唯一的通道才能把他们分开. 于是可以吧这条通道累加到一个数组里面.应为题目要求纵列的通道和横列的通道条数 ...

  5. CSP201403-3:命令行选项

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  6. 这才是球王应有的技艺，他就是C罗

    四年一度的世界杯在本周四拉开了帷幕,俄罗斯以5:0碾压沙特阿拉伯,让我们惊呼战斗名族的强大,其后的摩洛哥VS伊朗,摩洛哥前锋布哈杜兹将足球顶入自家球门,这......咳,咳,本来是为了解围,没想到成就 ...

  7. Spring学习（1）：侵入式与非侵入式，轻量级与重量级

    一. 引言 在阅读spring相关资料,都会提到Spring是非侵入式编程模型,轻量级框架,那么就有必要了解下这些概念. 二. 侵入式与非侵入式 非侵入式:使用一个新的技术不会或者基本不改变原有代码结 ...

  8. 在Windows2008下添加iscsi存储出现磁盘Offine(The disk is offine because of policy set by an adminstrator)的解决方法

    打开CMD命令行输入如下命令: DISKPART.EXE DISKPART> san SAN Policy : Offline Shared DISKPART> san policy=On ...

  9. 基于C#的机器学习--颜色混合-自组织映射和弹性神经网络

    自组织映射和弹性神经网络 自组织映射(SOM),或者你们可能听说过的Kohonen映射,是自组织神经网络的基本类型之一.自组织的能力提供了对以前不可见的输入数据的适应性.它被理论化为最自然的学习方式之 ...

  10. 观察者模式——Java实例

    一.定义 观察者模式(有时又被称为模型-视图(View)模式.源-收听者(Listener)模式或从属者模式)是软件设计模式的一种.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个 ...