Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

先来看一下最终的效果图

一、编辑器界面

二、上传图片界面

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

一、安装包下载,我使用的安装包是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)整合实现富媒体内容编辑(支持文件上传),布布扣,bubuko.com

时间: 2024-10-13 11:57:52

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

笨鸟先飞之Java(一)--使用struts2框架实现文件上传和下载

不管是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个常用功能会有很多种解决方式,但是struts2的框架却能给我们一个比较简单的方式,下面就一起来看吧: 文件上传: 首先来看实现上传功能的表单,Index.jsp: <span style="font-family:FangSong_GB2312;font-size:18px;"><%@ page language="java" contentType=&q

笨鸟先飞之Java(一)--使用struts2框架实现文件上传

无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: 文件上传: 首先来看实现上传功能的表单.Index.jsp: <span style="font-family:FangSong_GB2312;font-size:18px;"><%@ page language="java" contentType

java:ssh连接服务器,实现本地文件上传和下载

1.连接至服务器:ssh [email protected] -p 5555    下载文件:scp -r [email protected]:/ccc(服务器路径,文件夹下所有文件)  /path(本地路径)    上传文件:scp /ccc(本地文件路径) 2.文件上传: import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.io.OutputStream; i

Java 中使用 HttpClient 4.3.6 进行文件上传

代码部分 import org.apache.http.HttpEntity; import org.apache.http.client.methods.CloseableHttpResponse; import org.apache.http.client.methods.HttpPost; import org.apache.http.entity.ContentType; import org.apache.http.entity.mime.MultipartEntityBuilder;

atitit. 文件上传带进度条 atiUP 设计 java c# php

atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 6. struts extand url 3 7. behide code 3 8. 简化设计 3 1. 设计要求 带进度条 完成提示动画效果.. 2. 原理and 架构 如果需要显示进度条,实时显示文件上传进度 需要使用Ajaxj技术..up到个在的iframe黑头.. 工作原理 其实际

java文件上传和下载

简介 文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到本地. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的j

java spring 文件上传监听 控制条显示

1.        接管CommonsMultipartResolver,重写针对文件上传的请求. package com.sinosoft.amoeba.fileupload; import com.sinosoft.amoeba.fileupload.listener.FileUploadProgressListener;import org.apache.commons.fileupload.*;import org.apache.commons.fileupload.servlet.Se

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

文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将文件自身传递到服务端的(enctype默认为application/x-www-form-urlencoded) <form action="fileupload.do" method="post" enctype="multipart/form-dat

Java 文件上传组件 Apache Commons FileUpload 应用指南(转)

在最初的 http 协议中,没有上传文件方面的功能.RFC1867("Form-based File Upload in HTML".)为 http 协议添加了这个功能.客户端的浏览器,如 Microsoft IE, Mozila, Opera 等,按照此规范将用户指定的文件发送到服务器.服务器端的网页程序,如 php, asp, jsp 等,可以按照此规范,解析出用户发送来的文件. 2.1客户端 简单来说,RFC1867规范要求http协议增加了file类型的input标签,用于浏览