CKEditor二次开发----为CKEditor增加上传图片的功能
编程技术 / houtizong 发布于 3年前 106
这是我做的一个个人知识管理的一部分，现在把这部分提取出来，加上原代码，希望对大家学习工作有一定的的参考价值。
我对JAVA情有独钟，可惜，原本可以用CKFinder来完成图片上传的功能，可是呢，CKFinder不支持java,所以我只能自己对CKEditor动一下手。其实原理也很简单，只是把原来可以配置为上传的那个页面换成我们自己开发的上传页面。在这里，使用了Action来实现图片的上传，对不需要Action或对Action不懂的朋友，可以使用Servlet来代替那部分的功能，在此，我不就不多说了。
首先，修改对CKEditor引入的那部分javascript，代码如下:
<script type="text/javascript">CKEDITOR.replace('content',addUploadButton(this)); function addUploadButton(editor){ CKEDITOR.on('dialogDefinition', function( ev ){ var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'image' ){ var infoTab = dialogDefinition.getContents( 'info' ); infoTab.add({ type : 'button', id : 'upload_image', align : 'center', label : '上传图片', onClick : function( evt ){ var thisDialog = this.getDialog(); var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl'); var txtUrlId = txtUrlObj.getInputElement().$.id; addUploadImage(txtUrlId); } }, 'browse'); //place front of the browser button } }); } function addUploadImage(theURLElementId){ var uploadUrl = "myCkeditor/uploadImage.jsp"; //这是我自己的处理文件/图片上传的页面URL var imgUrl = window.showModalDialog(uploadUrl,null,"dialogWidth:360px;dialogHeight:120px;help:no;status:no"); var urlObj = document.getElementById(theURLElementId); urlObj.value = imgUrl; //alert(imgUrl); urlObj.fireEvent("onchange"); //触发url文本框的onchange事件，以便预览图片 }</script>
完成这个以后，我们可以做一个上传页面，如上代码 "myCkeditor/uploadImage.jsp"; //这是我自己的处理文件/图片上传的页面URL
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><%@taglib uri="/struts-tags" prefix="s"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>上传</title></head><body><iframe name="smz" width="0" height="0" frameborder="0"style="display: none"></iframe><font color="red"><s:property value="#request.errorMessage" /></font><form action="imageUpload" method="post" enctype="multipart/form-data"name="UploadPhoto" target="smz"><input type="file" name="file" id="file" class="button"><input type="hidden" name="type" id="type" value=".jpg"><input onClick="Submit()" type="submit" name="submit" value="上传" class="button"></form><input type="hidden" name="pagePath" id="_page_path"value="<%String p=(String)session.getAttribute("pagePath");if(p!=null)out.print(p);session.removeAttribute("pagePath"); %>" /><script type="text/javascript"> var _page_path = document.getElementById("_page_path").value; if(null!=_page_path && ""!=_page_path){ window.returnValue=_page_path; window.close(); }function Submit(){document.getElementById('type').value=document.getElementById('file').value;}</script></body></html>
再接下来，我们就要做Action,即如上所示的<form action="imageUpload" method="post" enctype="multipart/form-data"
name="UploadPhoto" target="smz">
，好了我们继续，
package com.burning.EasyCMS.myCkeditor;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;import java.util.Date;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import org.apache.struts2.ServletActionContext;public class FileUpload {private static final long serialVersionUID = 572146812454l;private static final int BUFFER_SIZE = 16 * 1024;private File file;private String type;private String pagePath;public String getType() {return type;}public void setType(String type) {this.type = type;}public File getFile() {return file;}public void setFile(File file) {this.file = file;}private static void copy(File src, File dst) {try {InputStream in = null;OutputStream out = null;try {in = new BufferedInputStream(new FileInputStream(src),BUFFER_SIZE);out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);byte[] buffer = new byte[BUFFER_SIZE];while (in.read(buffer) > 0) {out.write(buffer);}} finally {if (null != in) {in.close();}if (null != out) {out.close();}}} catch (Exception e) {e.printStackTrace();}}public String imageUpload() {HttpServletRequest request = ServletActionContext.getRequest();HttpSession session=request.getSession();try{String fileName = new Date().getTime()+ type.substring(type.length() - 4, type.length());String path = ServletActionContext.getServletContext().getRealPath("\\")+ "upload\\image\\";File imageFile = new File(path + fileName);pagePath = "upload\\image\\" + fileName;session.setAttribute("pagePath", pagePath);copy(file, imageFile);//System.out.println("file:"+file.getName());//System.out.println("file:"+file.);return "imageUploadSuccess";}catch(Exception e ){request.setAttribute("errorMessage", "图片上传未成功");return "imageUploadFail";}}} 接下来就是对struts.xml的配置了
<action name="imageUpload"class="com.burning.EasyCMS.myCkeditor.FileUpload"method="imageUpload"><result name="imageUploadSuccess">/myCkeditor/uploadImage.jsp</result><result name="imageUploadFail">/myCkeditor/uploadImage.jsp</result></action>
好了，，到此，功能就增加完毕了，为了完成这个功能，我也参考了网上很多资料，，
谢谢大家
上一篇：高负载系统，网络参数调整
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
