CKEditor-4.6.2结合Struts2的使用，加CKEditor图片上传的配置

最新推荐文章于 2024-05-14 09:17:59 发布

风华正茂少

最新推荐文章于 2024-05-14 09:17:59 发布

阅读量453

点赞数

分类专栏： WEB开发文章标签： struts2.0 图片 CKEditor

本文链接：https://blog.csdn.net/syx1065001748/article/details/69537055

版权

WEB开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自己最近也在寻找一个网页版的富文本编辑器，之前一直使用百度的UEditor,还算好用，但是觉得CKEditor的界面比较好看，所以打算使用这个文本编辑器，让自己的网页更好看些。

别的话不说了，直接上代码。

首先将下载好的包放在项目目录下

然后我们可以简单的设置一下config.js

	config.language = 'zh-cn';//设置为中文
	config.uiColor = '#AADC6E';//背景颜色

然后直接来一个JSP文件显示CKEditor

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"></script>
 <script src="${pageContext.request.contextPath}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
 <style type="text/css">
 .myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
	background:-moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:-ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
	background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0);
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#AADC6E;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #aade7c;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
	background:-moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:-ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
	background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a',GradientType=0);
	background-color:#5cb811;
}
.myButton:active {
	position:relative;
	top:1px;
}
 
 </style>
<title>测试</title>
</head>
<body>
	 <form >
            <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                var editor=CKEDITOR.replace( 'editor1', {
    				filebrowserUploadUrl: 'upload'
				});
            </script>
        </form>
        <a class="myButton" οnclick="submitData();">提交数据</a>
		 <h1>返回数据</h1>
		 <div id="content">
		 </div>
		 <script type="text/javascript">
		 function submitData(){
				var content=editor.getData();
				$.post("submit",{'content':content},function(result){
					$('#content')[0].innerHTML=result.content;	
				},"json");
			}
		 </script>
</body>

</html>

其中最主要的部分就是先写一个textarea然后替换成我们的CKEditor

            <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                var editor=CKEDITOR.replace( 'editor1', {
    				filebrowserUploadUrl: 'upload'
				});
            </script>

我们运行之后的界面是没有上传图片功能的，如图

所以我们需要设置一下加载文本编辑器的代码

var editor=CKEDITOR.replace( 'editor1', {
    				filebrowserUploadUrl: 'upload'
				});

其中

filebrowserUploadUrl: 'upload'

这句话就是说明我们文件上传的action,然后文本编辑器默认我们有上传功能就可以显示上传tab了。

我们配置一下文件上传的action,

我这里使用Struts2写的，我附一下代码

package com.taskmanager.action.upload;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Date;
import java.util.Properties;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.taskmanager.entity.User;

public class Upload1Action extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = 5772569168498055431L;
	private File upload;  
    private String fName;
    private String uploadContentType;  //文件类型  
    private String uploadFileName; 
    public String getfName() {
		return fName;
	}
	public void setfName(String fName) {
		this.fName = fName;
	}
	public File getUpload() {
		return upload;
	}
	public void setUpload(File upload) {
		this.upload = upload;
	}
	public String getUploadContentType() {
		return uploadContentType;
	}
	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}
	public String getUploadFileName() {
		return uploadFileName;
	}
	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}
	public String upload() throws Exception{  
		HttpServletResponse response = ServletActionContext.getResponse();  
        response.setCharacterEncoding("UTF-8");  
        PrintWriter out = response.getWriter();  
		HttpServletRequest request = ServletActionContext.getRequest();
		InputStream in = request.getServletContext().getResourceAsStream("/WEB-INF/classes/upload.properties");  
		Properties p = new Properties();  
		p.load(in);    
		String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");   
		String expandedName = ""; // 文件扩展名  
        String savePath=p.getProperty("upload_dir");
        String name = new Date().getTime()+"__"+uploadFileName;  
        if (uploadContentType.equals("image/pjpeg")  
                || uploadContentType.equals("image/jpeg")) {  
            // IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg  
            expandedName = ".jpg";  
        } else if (uploadContentType.equals("image/png")  
                || uploadContentType.equals("image/x-png")) {  
            // IE6上传的png图片的headimageContentType是"image/x-png"  
            expandedName = ".png";  
        } else if (uploadContentType.equals("image/gif")) {  
            expandedName = ".gif";  
        } else if (uploadContentType.equals("image/bmp")) {  
            expandedName = ".bmp";  
        } else {  
            out.println("<script type=\"text/javascript\">");  
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");  
            out.println("</script>");  
            return null;  
        }  
        if(savefile(upload,savePath,name,10485760))
        {
        	upload.delete();
        	out.println("<script type=\"text/javascript\">");  
        	
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback  
                    + ",'" + request.getContextPath() +fName+ "','')");  
            out.println("</script>");  
        	
            System.out.println("返回图片");
        } 
        return null;
   }  
   public boolean savefile(File file, String path, String filename, int size) { 
	    HttpServletRequest request = ServletActionContext.getRequest();
		File f =new File(path +"\\" +"CKEditor"+"\\");      
		if  (!f .exists()  && !f .isDirectory())      
		{       
		    f.mkdir();    
		} 
        boolean bool = true;  
        try {  
            InputStream is = new FileInputStream(file);  
            OutputStream os = new FileOutputStream(path +"\\" +"CKEditor"+"\\" + filename);  
            byte[] bytefer = new byte[size];  
            int length = 0;  
            while ((length = is.read(bytefer)) != -1) {  
                os.write(bytefer, 0, length);  
            }  
            os.close();  
            is.close();  
        } catch (Exception e) {  
            bool = false;  
        } 
        setfName("/upload/" +"CKEditor"+"/" + filename);
        System.out.println("上传文件到"+getfName());
        return bool;  
    }  
}

这里为了能在上传图片时返回图片，我们用到了一个返回函数

CKEDITOR.tools.callFunction

通过这个函数我们的文本编辑器就可以找到返回的图片的路径了。这样只要点击上传到服务器按钮就会自动捕获上传图片的链接了。

具体内容可以参考官方文档http://docs.ckeditor.com/#!/guide/dev_file_browse_upload

文本编辑器的内容的保存可以通过ajax的方式

<script type="text/javascript">
		 function submitData(){
				var content=editor.getData();
				$.post("submit",{'content':content},function(result){
					$('#content')[0].innerHTML=result.content;	
				},"json");
			}
		 </script>

也可以通过form表单的提交，获取相应editor的值。

因为使用Struts文件上传设计到一个参数大家可以按照自己的需要设置满足自己情况的大小这里是我的上传路径和设置文件的大小

	<constant name="struts.multipart.saveDir" value="D:\workspace-jee\taskManager\WebContent\upload"/>
	<constant name="struts.multipart.maxSize" value="10485760"/>

内容仅供参考，如有什么不对或不足的地方希望各位大神多多指点。