`
andrew.yulong
  • 浏览: 171572 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ckeditor使用+上传

阅读更多

ckeditor是FCK的升级版。

首先下载包就不说了,大家自己google。

 

1.打开config.js 就在下载的包里面。 配置一些基本的参数。

 

 

CKEDITOR.editorConfig = function(config) {
	config.language = 'zh-cn'; // 配置语言
	config.uiColor = '#FFF'; // 背景颜色
	config.width = '550'; // 宽度
	config.height = '300px'; // 高度
	config.skin = 'office2003';//界面v2,kama,office2003
	//config.toolbar = 'Full';// 工具栏风格Full,Basic
	config.filebrowserUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Files';//上传文件的保存路径
	config.filebrowserImageUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Images';//上传图片的保存路径
	config.filebrowserFlashUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Flash';//上传flash的保存路径
	config.toolbar =
		[
		    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
		    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
		    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
		    ['Link','Unlink','Anchor'],
		    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','TextColor','BGColor',
		     'Maximize', 'ShowBlocks','-','Source','-','Undo','Redo'],
		    '/',
		    ['Styles','Format','Font','FontSize']
		];
};
 

 

 

2.在你的jsp页面

 

 

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<textarea cols="80" id="contentID" name="content"></textarea>
<script type="text/javascript">  
   CKEDITOR.replace('contentID');  
</script>

 

ok  就这样基本可以使用了。

现在在来看看怎么上传。大家看看config.js 里面有3个参数是上传需要用到的。

 

config.filebrowserUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Files';//上传文件的保存路径
config.filebrowserImageUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Images';//上传图片的保存路径
config.filebrowserFlashUploadUrl = '/common/ajaxUpload.jsp?f=uploadFiles&type=Flash';//上传flash的保存路径
 

ok 看到这里 大家应该都明白了,需要一个ajaxUpload.jsp。下面就是ajaxUpload.jsp的全部内容

<%@ page language="java" pageEncoding="gbk"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="net.ask123.doers.common.Constants"%>
<%@page import="net.ask123.doers.common.VeDate"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="java.util.Iterator"%>
<%
	FileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	List<FileItem> items = upload.parseRequest(request);
	
	//...type 不为空代表ck上传
	String type= request.getParameter("type");
	String callback = request.getParameter("CKEditorFuncNum");
	String f = request.getParameter("f");
	if(f == null || f == ""){
		f = "ad";
	}
	String sid = VeDate.getNo(4);
	String filePath = "/"+f+"/" + sid.substring(0, 4) + "/"+ sid.substring(4, 6) + "/";
	String sPath = Constants.FILEUPLOADADDRESS + filePath;
	
	
	Iterator<FileItem> itr = items.iterator();
	
	String path = "";
	while (itr.hasNext()) {
		 FileItem item=(FileItem)itr.next();
		 if(!item.isFormField()){
			// 获得文件名及路径
             String fileName = item.getName();
			
             if (fileName != null) {
               	 File firstFolder = new File(sPath);
               	 if(!firstFolder.exists()) {
               		firstFolder.mkdirs();  
                 }
              	 String ext = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length());  
		         ext = ext.toLowerCase();  
            	 File fullFile = new File(sid+"."+ext);
            	 
            	 path = filePath+fullFile.getName();
           		 File fileOnServer = new File(sPath,
                            fullFile.getName());
                 item.write(fileOnServer);
             }
		 }
	}
	
	response.setCharacterEncoding("UTF-8");
	if(StringUtils.isBlank(type)){
		response.getWriter().write(path);
	}else{
		response.getWriter().write("<script type='text/javascript'>");  
		response.getWriter().write("window.parent.CKEDITOR.tools.callFunction("  
				                        + callback + ",'" + path + "',''" + ")");  
		response.getWriter().write("</script>");
	}
	  
%>

 

里面有些代码是自己的业务逻辑 大家可以精简一点。

这里有2个要注意的地方!

 

1. 需要下载org.apache.commons.fileupload 这个包 大家应该都知道 apache的下载组件。

 

2.执行完jsp后,CKEDITOR需要一个js的回调

 

response.getWriter().write("<script type='text/javascript'>");  
response.getWriter().write("window.parent.CKEDITOR.tools.callFunction("  
				                        + callback + ",'" + path + "',''" + ")");  
response.getWriter().write("</script>");

 这个回调是关键。

 

ok 基本就这了。

 

 

 

分享到:
评论

相关推荐

    ckeditor+ckfinder组合下载 (php演示版,2019年最新,绝对好用) ckeditor4+ckfinder3.1

    CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具,它们在网页内容编辑和上传文件方面提供了强大的功能。CKEditor是一个富文本编辑器,而CKFinder则作为一个插件,为CKEditor提供了一个方便的文件...

    ckeditor4.46+ckfinder2.4+配置文档说明

    CKEditor 是一个富文本编辑器,用于在网页上提供类似桌面应用的文本编辑体验,而 CKFinder 是一个文件管理器,与 CKEditor 配合使用,允许用户方便地上传、管理和插入图片、文档等媒体资源。 CKEditor 4.46 知识点...

    CKEditor3.4+CKFinder 2.0.1+asp 最终破解版

    CKEditor3.4+CKFinder 2.0.1+asp 最终破解版 ------By: XingDream 1:破解ckfinder,除去了浏览服务器资源页面上的测试demo的字样,注册提示,并做了适当的精简 2:支持image,flash,链接的上传 删除 等 3:修复了...

    ckeditor+struts2上传图片

    在IT行业中,富文本编辑器(如CKEditor)与MVC框架(如Struts2)的结合使用是常见的应用场景,特别是在构建Web内容管理系统时。CKEditor是一款强大的在线文本编辑器,提供丰富的文字编辑功能,而Struts2则是一个Java...

    ckeditor+ckfinder精简版 ckeditor+ckfinder精简版

    CKEditor和CKFinder是两个非常重要的在线文本编辑器和文件管理工具,在Web开发中被广泛使用。CKEditor是一款强大的富文本编辑器,提供丰富的文本格式化功能,使得用户可以在网页上进行类似桌面文字处理软件的编辑...

    CKEditor3.6.4+CKFinder2.3+配置

    CKFinder 2.3则是一个与CKEditor配套使用的文件管理器,方便用户上传、浏览和管理服务器上的文件,如图片、文档等。 CKEditor 3.6.4的核心知识点包括: 1. **富文本编辑**:CKEditor支持多种文本格式,如加粗、...

    CKEditor4+ckfinder ASP.NET 支持图片上传

    ckfinder则是一个文件管理工具,与CKEditor搭配使用,允许用户在编辑文章时方便地上传、选择和管理图片或其他文件。这个ASP.NET项目是关于如何在CKEditor4中集成ckfinder,以实现图片上传功能的示例。 首先,我们...

    ckeditor_4.2.2_full整合ckfinder_php_2.4+去掉提示+中文重命名+上传的文件路径带域名

    CKEditor是一款强大的富文本编辑器,提供丰富的文本格式化选项,而CKFinder则是一个文件管理器,用于在网页中上传、浏览和管理图片、文档等资源。 CKEditor 4.2.2 是 CKEditor 的一个版本,它提供了许多改进和新...

    CKEditor3.5.2+CKfinder

    CKEditor3.5.2是一个成熟的富文本编辑器,而CKFinder则是一个文件管理和上传组件,它们通常一起使用,以提供一个完整的文本编辑和文件管理解决方案。 CKEditor3.5.2是CKEditor的第三个主要版本,发布于2011年。这个...

    CKEditor3.6.2+CKFinder2.1

    这份文档可能会包含安装步骤、配置方法、以及如何通过CKEditor上传和管理由CKFinder处理的文件。 另外两个压缩文件,"ckfinder_aspnet_2.1.zip"和"ckeditor_aspnet_3.6.2.zip",分别是CKFinder和CKEditor针对ASP...

    最新版本ckeditor+ckfinder,集成上传功能

    它提供了一套完整的WYSIWYG(所见即所得)编辑界面,让用户在网页上编辑文本时,体验如同使用桌面文字处理软件一样的便捷。ckeditor支持多种格式的文本编辑,包括字体、字号、颜色、对齐方式、图片插入、链接添加...

    ckeditor3.35+ckfinder2.1_jar.rar

    这个整合的jar包提供了在Java环境中使用这两款工具的便利,使开发者能够轻松地在Web应用中实现文本编辑和文件上传的功能。 CKEditor是一款流行的开源JavaScript富文本编辑器,版本3.35是其在2010年发布的一个稳定...

    struts下ckeditor4.2+ckfinder2.3.1结合简单demo

    CKFinder 是一个与CKEditor配套使用的文件管理器,允许用户方便地上传、浏览和管理图片、文档等资源。在这个"struts下ckeditor4.2+ckfinder2.3.1结合简单demo"中,我们将探讨如何在Struts框架中整合这两个工具以实现...

    ckeditor+ckfinder+jwplayer

    其次,CKFinder是一款与CKEditor配套使用的文件管理插件,用于上传和管理网站上的资源,如图片、SWF文件等。CKfinder_aspnet_2.4.zip这个文件是ASP.NET版本的CKFinder,适用于.NET环境下的Web开发。它提供了一个直观...

    ckEditor5:ckEditor5+node+vue实现粘贴图片上传

    总的来说,"ckEditor5+node+vue实现粘贴图片上传"项目涉及到前端Vue.js应用、CKEditor5富文本编辑器的集成、Node.js后端服务的搭建以及图片上传的处理逻辑。通过这个项目,你可以深入理解如何在Web应用中实现富文本...

    ckeditor + ckFinder asp版

    ckFinder则是一款功能全面的文件管理器,能够方便地与ckeditor进行集成,提供图片上传、文件管理等服务。 ckeditor的核心特性在于它的所见即所得(WYSIWYG)编辑模式,用户可以直接在浏览器中进行文字排版、插入...

    CKEditor 4.0.1 +ckfinder_java_2.3.1

    而ckfinder_java则是与CKEditor配套使用的文件管理器,它允许用户在服务器上浏览、上传和下载文件,从而增强了CKEditor的功能。 CKEditor 4.0.1 版本是一个重要的更新,带来了更好的性能和更多的特性。它包括了优化...

    使用ckeditor+struts2+freemaker的图片上传

    总结来说,"使用ckeditor+struts2+freemaker的图片上传"涉及到前端CKEditor的配置、后端Struts2的Action处理和FreeMarker模板的渲染。理解这三个组件的工作原理和交互方式,能够帮助我们构建一个安全、高效的图片...

    [java]ckeditor4.2+ckfinder2.4 组合富文本例子支持weblogic上传图片

    本例子 基于[java]ckeditor4.2+ckfinder2.4 集成 实现 富文本上传图片例子,支持图片存放绝对路径,解决weblogic下无法浏览 及上传报500 无法找到xml的错误,虽然是修改源码实现,但修改量并不大。依然可以重新打jar...

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

    以上配置告诉`ckeditor`使用`ckfinder`来浏览和上传文件及图片。`filebrowserBrowseUrl`和`filebrowserUploadUrl`分别用于文件浏览和上传,`filebrowserImageBrowseUrl`和`filebrowserImageUploadUrl`则是针对图片的...

Global site tag (gtag.js) - Google Analytics