- 浏览: 224376 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
CKEditor
二次开发
----
为
CKEditor
增加上传图片的功能
文章分类
:Java
编程
这是我做的一个个人知识管理的一部分,现在把这部分提取出来,加上原代码,希望对大家学习工作有一定的的参考价值。
我对 JAVA 情有独钟,可惜,原本可以用 CKFinder 来完成图片上传的功能,可是呢, CKFinder 不支持 java, 所以我只能自己对 CKEditor 动一下手。其实原理也很简单,只是把原来可以配置为上传的那个页面换成我们自己开发的上传页面。在这里,使用了 Action 来实现图片的上传,对不需要 Action 或对 Action 不懂的朋友,可以使用 Servlet 来代替那部分的功能,在此,我不就不多说了。
首先是下载插件了 大家可以去官网上下载http://ckeditor.com/download/,在这里我已经下载了最新的版本大家可以直接下载
接下来第一步:
在myeclipse 新建一个web project 起名CkeditorPro(也可以随便起),让将下载的插件解压将ckeditor_3.6.2下的ckeditor文件夹拷贝到webRoot下。
第二步:
修改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 = 'auto'; // 宽度 config.height = '500px'; // 高度 config.skin = 'office2003';// 界面v2,kama,office2003 config.toolbar = 'Full';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbarCanCollapse = false;// 工具栏是否可以被收缩 config.resize_enabled = true;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js //自定义的工具栏 config.toolbar_MyToolbar = [ ['Source','-','Save','Preview','Print'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format'], ['Bold','Italic','Strike'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['Link','Unlink','Anchor'], ['Maximize','-','About'] ]; };
这里的config.js里的参数是来定义ckeditor界面的;大家可以找找Config中的参数的意思这里就不多说了
第三步:
在index.jsp中 添加一个标签
<textarea id="content" name="editor1"></textarea>
在添加js
<script type="text/javascript"> CKEDITOR.replace( 'content' ); </script>
最后的页面是
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>CKEditor</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> <body> <form id="form1" name="form1" method="post" action="getContent"> <table width="800" height="400" border="0" align="center"> <tr> <td valign="top"> 内 容: </td> <td> <textarea id="content" name="editor1"></textarea> <script type="text/javascript"> CKEDITOR.replace( 'content' ); </script> </script> </td> </tr> <tr> <td></td> <td> <input type="submit" name="Submit" value="提交" /> <input type="reset" name="Reset" value="重置" /> </td> </tr> </table> </form> </body> </html>
最后部属项目,运行tomcat 访问http://localhost:8080/CkeditorPro
效果图
*注意 现在的Ckeditor插件不能上传图片 处理后才能上传! 期待!
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1848项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20940(原创)javascript 实现批量打印《简历》 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1393@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42169异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 28141,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1548概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1956错误信息: javax.servlet.Servle ... -
“五一放假调整”疑是病毒?
2011-04-19 15:38 1023“五一放假调整”疑是病毒? 芜湖新闻网市民记者 ... -
50首最好听的英文歌
2011-04-15 08:40 196750首最好听的英文歌 ... -
Jquery从入门到精通及附件下载(一)
2011-03-30 08:15 3840Jquery从入门到精通及 ... -
javascript eval函数解析json数据时为什么 加上圆括号
2011-03-28 08:23 4225javascript eval函数解析json数据时为什么 加 ... -
Json 浅谈及解析
2011-03-25 17:07 2267Json 浅谈及解析 Json简介 ... -
Ajax 实现分页及表与表的级联
2011-03-24 20:57 1488Ajax 实现分页及表与表的级联 时间过的真快转 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1248预测本周五 java 考试题!! 1,加载类有哪几 ... -
解决Js解析xml浏览器不兼容问题及省市区三级联动实现
2011-03-22 19:04 1410解决Js解析xml浏览器不兼容问题及省市区三级联动实现 ... -
js 解析xml文件实现省市级联下拉菜单
2011-03-21 15:35 2221js 解析xml文件实现省市级联下拉菜单 写一个省 ... -
超强 DOM增删改,js日历综合案例实现
2011-03-17 21:07 2234DOM增删改,js日历综合案例实现 效果图: ... -
DOM总结(三)及综合案例
2011-03-17 20:59 1084DOM总结(三)及综合案例 1,DOM属性-----re ... -
DOM 总结(二)
2011-03-16 20:30 1304DOM 总结(二) 查找元素的方法: 1 ...
相关推荐
【集成CKEditor+ckeditor-java+ckfinder】 在Java Web项目中集成CKEditor和CKFinder,主要步骤如下: 1. 下载并引入CKEditor和CKFinder的Java版本到项目中。 2. 配置CKEditor的Java插件,使编辑器能够调用CKFinder...
SpringMVC是一个强大的Java web框架,它为开发者提供了模型-视图-控制器(MVC)架构,使得构建可维护和可扩展的Web应用程序变得更加容易。在这个主题中,我们将聚焦于如何在SpringMVC中配置Action,并结合CKEditor来...
JForum是一款流行的Java论坛软件,它提供了一个用户友好的界面,支持多语言,且具有高度可扩展性。CKEditor则是一个先进的在线文本编辑器,广泛用于网站内容管理系统,提供丰富的富文本编辑功能。在JForum中整合...
ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...
FCKeditor和CKEditor是两个非常知名的开源文本编辑器,广泛应用于网站建设和内容管理系统。 首先,我们来看"Fckeditor-java-2.4.1-bin.zip"。FCKeditor是一款早期的JavaScript富文本编辑器,它提供了丰富的文本格式...
标题和描述中提到的"ssh+sql+jquery+ckeditor+css2+html5+ext4+swt+xmlhttp+易宝支付帮助文档_各类web开发文档"是一个综合性的Web开发资源集合,涵盖了多个重要的技术领域。以下是这些技术的详细解释: 1. **SSH ...
Struts2是一个流行的Java web开发框架,它提供了一种模型-视图-控制器(MVC)架构,使得开发者可以更方便地构建可维护、可扩展的Web应用程序。CKEditor则是一个强大的富文本编辑器,广泛用于网站内容创建,它允许...
ckeditor是另一款非常流行的开源在线富文本编辑器,支持多种编程语言和平台,如PHP、ASP.NET、Java等。ckeditor_3.0.1_open.rar表示的是ckeditor的3.0.1版本的开源版本,开源意味着源代码公开,允许用户自由使用、...
在Java Web开发中,JSP(JavaServer Pages)是一种用于创建动态网页的技术。在这个特定的项目中,开发者选择了集成CKFinder和CKEditor来增强页面的编辑功能,这是一套常用的富文本编辑器解决方案。 CKEditor是一款...
以下是对"java与ckeditor和ckfinder整合后实现上传图片功能"这一主题的详细说明。 首先,**CKEditor** 是一个开源的JavaScript富文本编辑器,它提供了丰富的文本格式化选项,让用户可以在网页上创建类似于Word文档...
在“jfreechart+ckeditor+tinymce”的组合中,我们可以想象一个场景:一个数据分析师使用JFreeChart生成各种统计图表,然后将这些图表嵌入到由CKEditor或TinyMCE支持的Web应用中,以创建交互式报告。用户可以通过富...
CKeditor CKfinder 整合方案,清晰明了,供给有需要的伙伴!
在本文中,我们将深入探讨如何配置`ckeditor_java_3.5.3`和`ckfinder_java_2.0.2`这两个工具,以便在Java Web应用程序中实现富文本编辑功能和图片、文件管理。`CKEditor`是一款强大的JavaScript富文本编辑器,而`...
CKEditor3.6.4+CKFinder2.3 for java破解整合
**ckeditor+ckfinder(java 版本)** **一、CKEditor与CKFinder简介** CKEditor是一款功能丰富的开源富文本编辑器,它支持多种浏览器环境,提供了丰富的文本编辑功能,包括文字格式化、图像处理、链接创建等。...
ckeditor-简单链接插件一个简单的插件,可为CKEditor添加链接#GPL许可该程序是免费软件:您可以根据自由软件基金会发布的GNU通用公共许可的条款(许可的版本3)或(根据您的选择)任何更高版本来重新分发和/或修改它...
CKeditor for JAVA v3.6.4是一款专为JAVA开发者设计的在线网页编辑器,它提供了丰富的文本编辑功能,使得用户可以在浏览器环境下实现所见即所得(WYSIWYG)的编辑体验。这款编辑器不仅限于JAVA平台,还兼容多种...
此版本是"ckeditor-java-core-3.5.3",专门针对Java平台进行了优化,允许开发者在Java应用程序中集成CKEditor的功能。 1. **CKEditor简介** CKEditor是一款基于JavaScript的WYSIWYG(所见即所得)文本编辑器,最初...
2. 在线编辑器:基于Web的富文本编辑器,允许用户进行文字编辑、格式调整、图片插入等操作,可能集成WPS的Web API或使用开源库如CKEditor、Quill等。 3. 实时保存:用户编辑的任何变化都能自动保存,防止意外丢失。 ...
"ckeditor java版"指的是将CKEditor与Java平台相结合的版本,便于Java开发者使用。 在2012年12月12日发布的这个版本中,我们可以推测这可能是CKEditor 3.5.3的Java适配版。CKEditor 3.5.3是一个稳定的版本,它包含...