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"> </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)整合实现富媒体内容编辑(支持文件上传)的更多相关文章
- 笨鸟先飞之Java（一）--使用struts2框架实现文件上传
无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...
- java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 使用过程 和servlet差不多
java nio 写一个完整的http服务器 支持文件上传 chunk传输 gzip 压缩 也仿照着 netty处理了NIO的空轮询BUG 本项目并不复杂 代码不多 ...
- java web学习总结(二十四) -------------------Servlet文件上传和下载的实现
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- java：ssh连接服务器，实现本地文件上传和下载
1.连接至服务器:ssh hp@10.10.17.16 -p 5555 下载文件:scp -r hp@10.10.17.16:/ccc(服务器路径,文件夹下所有文件) /path(本地路径) ...
- SpringBoot整合阿里云OSS对象存储实现文件上传
1. 准备工作: 一.首先登录阿里云OSS对象存储控制台创建一个Bucket作为你的存储空间. 二.创建Access Keyan按要求创建进行,这里的方法步骤我就不展现出来了,你们可以自行查询阿里云文 ...
- Java 开源博客 Solo 1.8.0 发布 - 改进文件上传
本次发布主要是更新了编辑器,使其更好地支持文件上传.(1.8.0 版本变更记录请看这里) 我们的 Markdown 编辑器: 另外,我们对 HTTPS 的支持也更完善了,欢迎大家试用! 简介 Solo ...
- vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]
后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...
- java文件上传和下载
简介 文件上传和下载是java web中常见的操作,文件上传主要是将文件通过IO流传放到服务器的某一个特定的文件夹下,而文件下载则是与文件上传相反,将文件从服务器的特定的文件夹下的文件通过IO流下载到 ...
- Java Web(十一) 文件上传与下载
文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将 ...
随机推荐
- replace与replaceAll的区别
这两者有些人很容易搞混,因此我在这里详细讲述下. replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharSequence即字符串序列的意思,说白了 ...
- php小项目小结
最近一直断更,并不是出于什么问题,而是想找个合适的机会去整理下html基本的一些琐碎的知识点 近期突发感冒,吊水,吊错药,原因只是重名重姓,这不是个梗,很是痛苦的现实事故 so,只能用剩下的半天去完成 ...
- Windows网络通信(二)：socket异步编程
简述 这里使用的API和同步编程的API是差不多的,只多了一个ioctlsocket和select函数.这里面涉及一个很重要的结构体fd_set.这里用到的API大部分都是windows和linux通 ...
- 常用常忘的delegate，记一下。
多线程: 1 new Thread(new ThreadStart(Method1))).Start(); 1 new Thread(new ParameterizedThreadStart(Meth ...
- vue中的样式
一.使用class样式: CSS部分: <style> .green{ color:green; } .italic{ font-style:italic; } .thin{ ; } .a ...
- Delphi 中的 RectTracker - 原创
本文算是副产品,正品是利用 FFmpeg 从任意视频中生成GIF片段的小程序,写完了就发. V2G 正品已出炉,虽然不大像样,但好歹是能用,请见:用 Delphi 7 实现基于 FFMS2 的视频转 ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- tensorflow训练线性回归模型
tensorflow安装 tensorflow安装过程不是很顺利,在这里记录一下 环境:Ubuntu 安装 sudo pip install tensorflow 如果出现错误 Could not f ...
- Java 异常总结
Throwablede类是 Java 语言中所有错误或异常的超类. 两个子类的实例,Error 和 Exception Error 是 Throwablede 的子类,用于指示合理的应用程序不应该试图 ...
- WebService（二）
使用eclipse开发webservice的服务器端以及客户端的简单实例 1.服务端 在eclipse中像建立一个web项目一样,new->Dynamic Web Project A.建一个需要 ...