`
yy_hards
  • 浏览: 32290 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

ckeditor 插件添加上传功能

阅读更多
引用插件处如下(content 为文本域的ID):
<script type="text/javascript">
//CKEDITOR.replace("content");
        CKEDITOR.replace('content',{
        filebrowserUploadUrl : '/ckeditor/uploader?Type=File',  
filebrowserImageUploadUrl : '/ckeditor/uploader?Type=Image',  
filebrowserFlashUploadUrl : '/ckeditor/uploader?Type=Flash' 
        });  

</script>
web.xml(ckeditor.CKEditorUploadServlet指定你的package)
<servlet>
		<servlet-name>SimpleUploader</servlet-name>
		<servlet-class>ckeditor.CKEditorUploadServlet</servlet-class>
		<init-param>
			<param-name>baseDir</param-name>
			<param-value>/UserFiles/</param-value>
		</init-param>
		<init-param>
			<param-name>debug</param-name>
			<param-value>false</param-value>
		</init-param>
		<init-param>
			<param-name>enabled</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>AllowedExtensionsFile</param-name>
			<param-value></param-value>
		</init-param>
		<init-param>
			<param-name>DeniedExtensionsFile</param-name>
			<param-value>
				html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl
			</param-value>
		</init-param>
		<init-param>
			<param-name>AllowedExtensionsImage</param-name>
			<param-value>jpg|gif|jpeg|png|bmp</param-value>
		</init-param>
		<init-param>
			<param-name>DeniedExtensionsImage</param-name>
			<param-value></param-value>
		</init-param>
		<init-param>
			<param-name>AllowedExtensionsFlash</param-name>
			<param-value>swf|fla</param-value>
		</init-param>
		<init-param>
			<param-name>DeniedExtensionsFlash</param-name>
			<param-value></param-value>
		</init-param>
		<load-on-startup>0</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>SimpleUploader</servlet-name>
		<url-pattern>/ckeditor/uploader</url-pattern>
	</servlet-mapping>

servlet
package ckeditor;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class CKEditorUploadServlet extends HttpServlet {

	private static String baseDir;// CKEditor的根目录
	private static boolean debug = false;// 是否debug模式
	private static boolean enabled = false;// 是否开启CKEditor上传
	private static Hashtable allowedExtensions;// 允许的上传文件扩展名
	private static Hashtable deniedExtensions;// 阻止的上传文件扩展名
	private static SimpleDateFormat dirFormatter;// 目录命名格式:yyyyMM
	private static SimpleDateFormat fileFormatter;// 文件命名格式:yyyyMMddHHmmssSSS

	/**
	 * Servlet初始化方法
	 */
	public void init() throws ServletException {
		// 从web.xml中读取debug模式
		debug = (new Boolean(getInitParameter("debug"))).booleanValue();
		if (debug)
			System.out
					.println("\r\n---- SimpleUploaderServlet initialization started ----");
		// 格式化目录和文件命名方式
		dirFormatter = new SimpleDateFormat("yyyyMM");
		fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		// 从web.xml中获取根目录名称
		baseDir = getInitParameter("baseDir");
		// 从web.xml中获取是否可以进行文件上传
		enabled = (new Boolean(getInitParameter("enabled"))).booleanValue();
		if (baseDir == null)
			baseDir = "/UserFiles/";
		String realBaseDir = getServletContext().getRealPath(baseDir);
		File baseFile = new File(realBaseDir);
		if (!baseFile.exists()) {
			baseFile.mkdirs();
		}
		// 实例化允许的扩展名和阻止的扩展名
		allowedExtensions = new Hashtable(3);
		deniedExtensions = new Hashtable(3);
		// 从web.xml中读取配置信息
		allowedExtensions.put("File",
				stringToArrayList(getInitParameter("AllowedExtensionsFile")));
		deniedExtensions.put("File",
				stringToArrayList(getInitParameter("DeniedExtensionsFile")));

		allowedExtensions.put("Image",
				stringToArrayList(getInitParameter("AllowedExtensionsImage")));
		deniedExtensions.put("Image",
				stringToArrayList(getInitParameter("DeniedExtensionsImage")));

		allowedExtensions.put("Flash",
				stringToArrayList(getInitParameter("AllowedExtensionsFlash")));
		deniedExtensions.put("Flash",
				stringToArrayList(getInitParameter("DeniedExtensionsFlash")));
		if (debug)
			System.out
					.println("---- SimpleUploaderServlet initialization completed ----\r\n");
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		if (debug)
			System.out.println("--- BEGIN DOPOST ---");
		response.setContentType("text/html; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();
		// 从请求参数中获取上传文件的类型:File/Image/Flash
		String typeStr = request.getParameter("Type");
		if (typeStr == null) {
			typeStr = "File";
		}
		if (debug)
			System.out.println(typeStr);
		// 实例化dNow对象,获取当前时间
		Date dNow = new Date();
		// 设定上传文件路径
		String currentPath = baseDir + typeStr + "/"
				+ dirFormatter.format(dNow);
		// 获得web应用的上传路径
		String currentDirPath = getServletContext().getRealPath(currentPath);
		// 判断文件夹是否存在,不存在则创建
		File dirTest = new File(currentDirPath);
		if (!dirTest.exists()) {
			dirTest.mkdirs();
		}
		// 将路径前加上web应用名
		currentPath = request.getContextPath() + currentPath;
		if (debug)
			System.out.println(currentDirPath);
		// 文件名和文件真实路径
		String newName = "";
		String fileUrl = "";
		if (enabled) {
			// 使用Apache Common组件中的fileupload进行文件上传
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(factory);
			try {
				List items = upload.parseRequest(request);
				Map fields = new HashMap();
				Iterator iter = items.iterator();
				while (iter.hasNext()) {
					FileItem item = (FileItem) iter.next();
					if (item.isFormField())
						fields.put(item.getFieldName(), item.getString());
					else
						fields.put(item.getFieldName(), item);
				}
				// CEKditor中file域的name值是upload
				FileItem uplFile = (FileItem) fields.get("upload");
				// 获取文件名并做处理
				String fileNameLong = uplFile.getName();
				fileNameLong = fileNameLong.replace('\\', '/');
				String[] pathParts = fileNameLong.split("/");
				String fileName = pathParts[pathParts.length - 1];
				// 获取文件扩展名
				String ext = getExtension(fileName);
				// 设置上传文件名
				fileName = fileFormatter.format(dNow) + "." + ext;
				// 获取文件名(无扩展名)
				String nameWithoutExt = getNameWithoutExtension(fileName);

				File pathToSave = new File(currentDirPath, fileName);
				fileUrl = currentPath + "/" + fileName;
				if (extIsAllowed(typeStr, ext)) {
					int counter = 1;
					while (pathToSave.exists()) {
						newName = nameWithoutExt + "_" + counter + "." + ext;
						fileUrl = currentPath + "/" + newName;
						pathToSave = new File(currentDirPath, newName);
						counter++;
					}
					uplFile.write(pathToSave);
				} else {
					if (debug)
						System.out.println("无效的文件类型: " + ext);
				}
			} catch (Exception ex) {
				if (debug)
					ex.printStackTrace();
			}
		} else {
			if (debug)
				System.out.println("未开启CKEditor上传功能");
		}
		// CKEditorFuncNum是回调时显示的位置,这个参数必须有
		String callback = request.getParameter("CKEditorFuncNum");
		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" + fileUrl + "',''" + ")");
		out.println("</script>");
		out.flush();
		out.close();
		if (debug)
			System.out.println("--- END DOPOST ---");
	}

	/**
	 * 获取文件名的方法
	 */
	private static String getNameWithoutExtension(String fileName) {
		return fileName.substring(0, fileName.lastIndexOf("."));
	}

	/**
	 * 获取扩展名的方法
	 */
	private String getExtension(String fileName) {
		return fileName.substring(fileName.lastIndexOf(".") + 1);
	}

	/**
	 * 字符串像ArrayList转化的方法
	 */

	private ArrayList stringToArrayList(String str) {
		if (debug)
			System.out.println(str);
		String[] strArr = str.split("\\|");
		ArrayList tmp = new ArrayList();
		if (str.length() > 0) {
			for (int i = 0; i < strArr.length; ++i) {
				if (debug)
					System.out.println(i + " - " + strArr[i]);
				tmp.add(strArr[i].toLowerCase());
			}
		}
		return tmp;
	}

	/**
	 * 判断扩展名是否允许的方法
	 */
	private boolean extIsAllowed(String fileType, String ext) {
		ext = ext.toLowerCase();
		ArrayList allowList = (ArrayList) allowedExtensions.get(fileType);
		ArrayList denyList = (ArrayList) deniedExtensions.get(fileType);
		if (allowList.size() == 0) {
			if (denyList.contains(ext)) {
				return false;
			} else {
				return true;
			}
		}
		if (denyList.size() == 0) {
			if (allowList.contains(ext)) {
				return true;
			} else {
				return false;
			}
		}
		return false;
	}

}


参考原文http://sarin.iteye.com/blog/599499
分享到:
评论

相关推荐

    ckeditor4添加上传视频插件

    ckeditor4添加上传视频插件 后端java配置看下面的链接 https://blog.csdn.net/sxz13145/article/details/124410416

    CKEditor 添加Video插件(MP4,MP3)并且兼容HTML5 Video插件

    CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2:ckeditor/config.js 中添加如下: a:在toolbar中['Image','Flash','Video'],配置加入“Video” 项。 b:配置 ...

    ckeditor批量上传图片插件的添加

    ckeditor的多图上传插件添加,下载后用vs2015打开,运行index.html文件即可看到效果,若非C#语言,也可下载参考,修改上传图片的那个方法(除了这个方法,其它就是html和js)就ok了。做网站需要,研究了好多天!

    ckeditor批量上传图片--demo

    为ckeditor添加批量上传图片的插件,以demo的方式展示,清晰易懂!整个文件代码可以直接复用,复用性强!

    CKEDITOR之video 插件&amp;窗口包含文件上传功能

    CKEDITOR富文本编辑软件有个大家通用的video插件,但是该插件窗口没有“文件上传到web服务器的功能”,故在在此基础上,添加了“文件上传服务器”的功能,便于日常使用,目前仅在django_ckeditor中测试。

    CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件,完美运行

    CKEditor 只能增加flash播放格式,没有视频插件。 这个插件允许插入和编辑新的HTML5&lt;video&gt;元素。该对话框允许指定的海报图像,尺寸(他们是根据预览自动调整)和两个源文件, 这样既使用了WebM格式(Chrome浏览器,...

    ckeditor plugin video

    ckeditor 插件 上传视频

    ckeditor5-plugins:自定义ckeditor5插件(例如

    CKEditor5-plugins基于ckeditor5的,适用于自定义构建的插件包。要使用此插件包,则不建议直接使用官方的classic、document、inline、balloon等构建,建议自定义构建features 包含功能├── src│ ├── clear-...

    ckeditor5-video

    使用 npm npm install --save-dev @visao/ckeditor5-video -带纱线yarn add -D @visao/@visao/ckeditor5-video 与图片上传非常相似。插件视频插件在编辑器中解析视频的插件其他插件必选 VideoRelated plugins ...

    CKEditor-upload:我制作了一个插件将图像上传到 WYSIWYG CKEditor

    CKEDITOR.replace( 'editor', { // 添加上传插件(检查文件夹:“plugins/upload”) extraPlugins : 'upload' } ); 并且您还需要添加这一行,以指定上传服务器文件。 CKEDITOR.dialog.url_uploader = "file_...

    droploader:Droploader 是 CKEditor 的插件,通过拖放启用图像上传。 它适用于 4.4.x 版和旧后端

    Droploader - CKEditor 的图片上传插件该插件允许使用标准文件上传后端通过拖放到编辑器窗口来上传一张或多张图像。 此功能将与 CKEditor 4.5 捆绑在一起,该插件首次发布时处于测试阶段。 然而,新的捆绑插件使用了...

    CKEditor-Glyphicons:将CKEditor Glyphicons插件添加到Typesetter CMS

    安装后,一个新图标将出现在CKEditor的工具栏中,该图标将调用插件对话框,并允许将“ Glypicon Halflings”图标添加到可编辑的文本内容中。 将同时安装和以解决依赖性。 (“已经是Typesetter CKEditor构建的一...

    CKEditor 4.10.1 中文版.zip

    CKEditor是新一代的FCKeditor,是一个重新开发的版本,CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展...API更改:添加了[`editor.plugins.detectConflict()`]方法查找提供的插件之间的冲突。

    dede5.7自动添加内链插件

    dede5.6的时候出来的一款插件 ,让我记忆留心,那就是自动添加内链的插件 ,可惜这款插件 只有5.6版本才可以使用,无奈在升级到5.7版本后,已经有很久没有再使用这款插件 了,今天终于看到该插件 的5.7版本,在这里...

    ckeditor5-qiniu-uploader:秦牛OSS上载ckeditor5的服务

    将插件添加到build-config.js module . exports = { // The editor creator to use. editor : '@ckeditor/ckeditor5-editor-classic/src/classiceditor' , // The name under which the editor will be ...

    ckeditor5-simple-upload

    标准图片上传按钮建立整合 npm install ckeditor5-simple-upload 添加此插件并删除ckfinder和easyimage插件// src/ckeditor.jsimport UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'...

    trapi-plugin-ckeditor5:用增强的CKEditor 5版本替换Strapi默认的WYSIWYG编辑器

    Strapi CKEditor5插件 用增强HTML 替换默认的 markdown WYSIWYG编辑器。 样品文章。 产品特点 与经典编辑器相比具有更多功能 丰富内容的丰富功能集 可选的编辑器定制 自动将插入的图像上传到媒体库(由于 ) 媒体...

    VS2019 ASP.NET MVC5 新手入门实例包括CRUD,以及常用上传图片和富文本CKEDITOR演示DEMO

    适用人数:ASP.NET MVC5入门,EF入门、SQL SERVER 入门 使用场景及目标:ASP.NET MVC网站实例,用于ASP.NET MVC新手入门 使用说明: 1、在数据库中(SQL SERVER)中建立一个名为demo_mvc的...ckeditor(富文本插件) we

    ckeditor-plugin-googledoc

    // 向 CKEditor 添加插件 config.extraPlugins = '..., googledocs, ...'; // 该地址用于处理文件上传到服务器 // 上传脚本的 URL config.filebrowserGoogledocsUploadUrl = ' '; // 在这个地址你可以得到服务器...

    rails_admin_image_manager:RailsAdmin和CKEditor的图像管理器

    RailsAdmin_ImageManager RailsAdmin和CKEditor的图像管理器。 安装 将此行添加到您的应用程序的Gemfile中: ... 安装图像管理器CKEditor插件 mkdir -p app/assets/javascripts/ckeditor && touch app

Global site tag (gtag.js) - Google Analytics