`

CKEditor整合CKFinder实现上传

    博客分类:
  • Java
 
阅读更多
目前在做的一个项目中要用到文本编辑器,以前用的比较多的是FCkEditor,但FCKEditor被无情的分解该成了CKEditor,分解却不说还不支持图片上传功能了,提供了个什么CKFinder的插件.所谓插件那就是要dollar了.也就是说FCKEditor=CKEditor+CKFinder.分成了两部分,文本编辑很图片上传。
因为要票子了却样式还是那么的丑陋,对那东东不是很感冒。之前在IT眼上看到了一款国人开发的文本编辑器KindEditor。所以就改变了战场来到了天朝。怎么说也是国人开发的,作为普天之下的一名小小的挨踢程序猿所以也来支持下了.非广告形式的来宣传一下,官网地址是这个http://www.kindsoft.net/index.php当哥啊满怀豪情壮志屁颠屁颠的拿来玩一下的时候做的一个demo很ok看着样式比较清爽,可拿到项目中,它报错了  ,用Firebug调试了下也找到了问题所在,在项目中用到了mootools.js这个就是文件,问题就出在这里了KindEditor与mootools.js样式冲突.哥的心是拔凉拔凉啊!!!  网上度娘了一把,嘿嘿,还真有人和我出现了同样的问题.官网论坛上大牛也提出了但到今天为止还没有解决.


没办法哥也只能是抛弃她放弃她了.辗转反侧又来到了CkEditor的怀抱.天朝的程序猿是很NB的很强大的,网上插件破解方法是百花齐放啊!     这个那就放心了...
现在来开始准备资源,

1.资源
在[url]http://ckeditor.com/download [/url]下载当前最新的3.6.2版本的CKEditor和CKEditor-java-3.6.2.
在[url]http://ckfinder.com/download [/url]下载当前最新的java版本的ckfinder-java-2.1.


2.配置
在MYEclipse中新建Web Project项目:CKEditor
1.解压CKEditor将ckeditor文件夹放到工程的WebRoot目录下
2.再将CKFinder文件夹也放到工程的WebRoot目录下(及和CKEditor在同一级)

注意: ckfinder_java_2.1\ckfinder\CKFinderJava \ckfinder
3.复制ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml配置文件到WEB-INF下面
4.复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面:
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib
ckeditor-java-3.6.2\WEB-INF\lib

5.删除无用的文件
1.首先是ckeditor 下面的文件:
_sample,_source, CHANGES.html, ckeditor_php4.php ,  ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html
2.然后是ckfinder 下面的文件:
_samples, help, changelog.txt, install.txt, license.txt, translation.txt
6.修改配置文件config.xml
      
 <baseDir></baseDir>
	<baseURL>/CKEditor_Finder/userfiles/</baseURL>

7.在web.xml中添加如下代码:
<servlet>
		<servlet-name>ConnectorServlet</servlet-name>
		<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
		<init-param>
			<param-name>XMLConfig</param-name>
			<param-value> /WEB-INF/config.xml </param-value>
		</init-param>
		<init-param>
			<param-name>debug</param-name>
			<param-value> false </param-value>
		</init-param>
		<load-on-startup> 1 </load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>ConnectorServlet</servlet-name>
		<url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
	</servlet-mapping>
	<filter>
		<filter-name>FileUploadFilter</filter-name>
		<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
		<init-param>
			<param-name>sessionCookieName</param-name>
			<param-value>JSESSIONID</param-value>
		</init-param>
		<init-param>
			<param-name>sessionParameterName</param-name>
			<param-value>jsessionid</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>FileUploadFilter</filter-name>
		<url-pattern>/ckfinder/core/connector/java/connector.java</url-pattern>
	</filter-mapping>
	<session-config>
		<session-timeout>10</session-timeout>
	</session-config>

8.修改ckeditor/config.js文件的内容
CKEDITOR.editorConfig =  function (config) {  
    config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html';  
    config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images';  
    config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/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';  
    config.language =  "zh-cn" ;  
};

9.新建一个jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<html>
	<head>
		<title>首页</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
	</head>
	<body>
		<form action="getContent" method="get">
			<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>  
   			 <input type="submit" value="Submit" />  
		</form>
		<ckfinder:setupCKEditor basePath="/CKEditor_Finder/ckfinder/" editor="editor1" />
		<ckeditor:replace replace="editor1" basePath="/CKEditor_Finder/ckeditor/" />
	</body>
</html>

10.有图有真相====>效果图





  • 大小: 86.1 KB
  • 大小: 14.5 KB
  • 大小: 63.8 KB
分享到:
评论
4 楼 Dear疼你 2012-03-31  
[img][/img]     
3 楼 Dear疼你 2012-03-31  
[im    g][/img]
2 楼 luolonghao 2011-12-13  
KindEditor 4.0.1版本和Mootools有冲突,最新版本早就没这个问题了。

http://www.kindsoft.net/ke4/examples/mootools.html
1 楼 lulisongtest 2011-12-05  
[img][/img]  

相关推荐

    整合ckeditor+ckfinder实现图片或文件上传功能

    总之,通过`ckeditor`和`ckfinder`的整合,你可以为JAVA工程提供一个强大的富文本编辑体验,同时具备图片和文件的上传管理功能。在实际开发过程中,需要注意兼容性、性能优化以及安全性,以确保用户体验和系统稳定。

    ckeditor与ckfinder(java版)整合,实现图片上传

    ### CKEditor与CKFinder(Java版)整合实现图片上传的知识点 #### 1. CKEditor配置详解 **下载与安装** - **下载地址**: [http://ckeditor.com/download](http://ckeditor.com/download) - **安装步骤**: - 解压...

    Ckeditor与ckfinder整合

    在本文中,我们将深入探讨如何将Ckeditor与ckfinder整合在Java环境下,实现文件上传功能。Ckeditor是一款强大的富文本编辑器,而ckfinder则是一个文件管理器,它们结合使用可以方便地在编辑器中插入、管理和上传各种...

    ckeditor + ckFinder asp版

    具体实现时,首先需要在服务器上部署ckeditor和ckFinder,并配置ckFinder与ckeditor的连接参数,如CKEditor的路径、ckFinder的根目录等。然后在ckeditor的初始化代码中,通过配置filebrowserBrowseUrl和...

    wordpress插件ckeditor整合ckfinder

    整合CKEditor和CKFinder可以极大地提升WordPress用户在编辑内容时的便利性,特别是在处理多媒体内容时。它们的组合使用户无需离开编辑界面就能完成文件上传和管理,提高了工作效率。不过,记得在使用过程中关注插件...

    ckeditor和ckfinder简单功能

    在这个“Blog”项目中,作者已经实现了CKEditor和CKFinder的基本整合,能够满足基本的文章编辑和文件管理需求。但需要注意的是,可能还存在一些高级功能未实现,例如图片预览、文件拖放上传、多媒体文件支持等。随着...

    ckeditor+ckfinder(java 版本)

    这个项目是基于Java实现的CKEditor和CKFinder的集成方案,意味着它使用Java后端技术来处理文件上传、管理等操作。这使得项目可以在Java服务器环境下运行,如Tomcat、Jetty等,同时也支持Spring、Struts等主流Java...

    最新ckeditor_ckfinder整合超完整版 for PHP 附ckeditor完整中文配置

    总之,通过PHP整合CKEditor和CKFinder,可以实现一个强大的文本编辑器,让用户在创建内容时能方便地上传和管理多媒体文件。配置过程虽然涉及一些技术细节,但遵循正确的步骤和文档指导,可以顺利完成。这个整合超...

    CKEditor和CKFinder整合实现上传下载功能 java

    ckfinder java使用 富文本编辑框 CKEditor和CKFinder整合实现上传下载功能 可以直接导入使用 整合参考资料: http://guoliang0-0-yahoo-cn.iteye.com/blog/1195348

    Ckeditor与ckfinder整合forJAVA

    Ckeditor与ckfinder整合forJAVA(支持文件上传),详细描述,按照步骤操作即可搭建可视化html编辑器

    JSP使用ckeditor和ckfinder实现富文本及文件上传

    在这个场景中,"JSP使用ckeditor和ckfinder实现富文本及文件上传"是一个常见的需求,尤其是在构建内容管理系统或者论坛等需要用户编辑和上传内容的Web应用中。 ckeditor是一款流行的开源JavaScript富文本编辑器,它...

    java与ckeditor和ckfinder整合后实现上传图片功能

    3. **整合CKFinder与CKEditor**:在CKEditor中设置图片上传按钮或插件,使其指向CKFinder的URL。当用户点击上传图片时,CKFinder会打开,用户可以选择服务器上的图片或者上传新的图片。 4. **处理文件上传**:在...

    ckeditor4.2 整合ckfinder_2.4 for PHP

    《ckeditor4.2整合ckfinder_2.4 for PHP:构建强大的富文本编辑器与文件管理器》 在Web开发中,富文本编辑器(WYSIWYG Editor)是不可或缺的一部分,它允许用户以类似Word的方式创建和编辑内容。CKEditor 4.2.2是一...

    Ckeditor、ckfinder整合项目

    整合CKEditor和CKFinder,可以让用户在编辑文本时方便地插入和管理服务器上的图片、文件等资源。CKFinder作为CKEditor的附件管理模块,可以在编辑器中打开,让用户直接在编辑界面选择和上传文件,提升了工作效率。 ...

    CKEditor和CKFinder整合的ASP.NET实例

    asp.net中调用ckeditor和ckfinder,实现HTML在线编辑的图片上传,本实例将编辑器中的数据提交给页面中的Label1,点击预览按钮之后直接在本页显示编辑器生成的HTML代码。非常简单的,让大牛们见笑了。

    Ckeditor+ckfinder例子

    将CKEditor与CKFinder整合,可以使用户在编辑文本时直接通过CKFinder上传图片或其他文件,而无需离开编辑界面。这个例子中,已经完成了两者的集成,使得用户在编辑过程中可以无缝地上传图片。 **自定义功能:自动...

    最新ckeditor_ckfinder整合超完整版

    php开发--使用 CKEditor 和 CKFinder 实现上传功能 1. 下载安装 CKEditor: 2. 下载安装 CKFinder: 3. 在网页中使用 CKEditor 和 CKFinder: 4. 配置CKFinder进行上传图片,Flash等。 5.Ckfinder实现普通文件...

    ckeditor+ckfinder配置

    CKFinder则是一个与CKEditor配套的文件管理工具,允许用户上传、浏览、管理和插入图片、文档等多媒体资源。将这两者结合起来,可以构建一个功能强大的在线内容创作环境。 **CKEditor 4.2 知识点** 1. **CKEditor ...

    最新c#整合ckeditor+ckfinder示例

    4. 集成CKFinder到CKEditor,通常通过CKEditor的"插件"系统实现,使用户能在编辑器中触发CKFinder对话框来选择和上传文件。 5. 在服务器端处理CKFinder的文件上传请求,确保安全性并进行必要的文件管理操作。 这个...

    CKEditor,Ckfinder上传图片详解及部分示例源码

    通过分析和理解这些示例,开发者可以更好地了解如何在自己的项目中实施CKEditor和Ckfinder的整合,从而提供一个完善的图片上传和管理解决方案。 在实际应用中,为了提高用户体验,开发者可能还需要关注性能优化,...

Global site tag (gtag.js) - Google Analytics