Home > Developer > Web Develop
Application environment: struts2,jsp. IE8 under test pass.
Kindeditor version 3.5.4, the official website after the download, take plugins, skins folder and Kindeditor.js placed in the Web project Webroot. This article simply describes how to use the Kindeditor, and implement the image upload function, the page submission function is not implemented.
First look at the page
[Java] View plaincopy
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<base href= "<%=basePath%>" >
<title>kindeditor test Page </title>
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/component/kindeditor/kindeditor.js" ></script>
<script type= "Text/javascript" >
Ke.show ({
ID: ' content ',//ID of the textarea below
Height: ' 500px ',
resizemode:0,
Skintype: ' Default ',
Autoonsubmitmode: ' True ',
The items option removes features you don't want, such as removing the ability to upload flash. Without this, all features are turned on by default
Items: [
' Source ', ' | ', ' fullscreen ', ' undo ', ' Redo ', ' print ', ' cut ', ' copy ', ' Paste ',
' Plainpaste ', ' wordpaste ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ',
' Justifyfull ', ' insertorderedlist ', ' insertunorderedlist ', ' Indent ', ' outdent ', ' subscript ',
' Superscript ', ' | ', ' selectall ', '-',
' title ', ' FontName ', ' fontsize ', ' | ', ' textcolor ', ' bgcolor ', ' bold ',
' Italic ', ' underline ', ' strikethrough ', ' Removeformat ', ' | ', ' image ',
' Advtable ', ' hr ', ' emoticons ', ' link ', ' unlink ', ' | ', ' about '
],
Imageuploadjson: ' ${pagecontext.request.contextpath}/component/kindeditor/uploadimage.do '
});
</script>
<body>
Kindeditor test Page <br>
<form id= "Example" method= "POST" action= "${pagecontext.request.contextpath}/component/kindeditor/preview.do" >
<textarea id= "Content" name= "content" style= "Width:700px;height:300px;visibility:hidden;" ><br/>
<input type= "Submit" value= "Submission"/> (Submit shortcut: Ctrl + Enter)
</form>
</body>
Processing of background programs
[Java] View plaincopy
Package org.wusq.ssx.component.kindeditor;
Import Java.io.File;
Import java.io.FileNotFoundException;
Import java.io.IOException;
Import Java.io.PrintWriter;
Import java.io.UnsupportedEncodingException;
Import Java.util.Date;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;
Import Org.apache.struts2.ServletActionContext;
Import Org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;
Import Org.springframework.stereotype.Controller;
Import Org.wusq.ssx.util.ImageUtils;
Import Com.opensymphony.xwork2.ActionSupport;
/**
* Kindeditor Test class
* @author WUSQ
* @since 2011-05-05
*/
@Controller
public class Kindeditor extends actionsupport{
Private static final long serialversionuid = 6624518147834729694L;
Picture Object
Private File Imgfile;
Picture width
Private String ImgWidth;
Picture height
Private String imgheight;
Picture Alignment
Private String align;
Picture Title
Private String Imgtitle;
Public String Uploadimage () throws exception{
Multipartrequestwrapper wrapper = (multipartrequestwrapper) servletactioncontext.getrequest ();
Get the name of the picture
String imgname = wrapper.getfilenames ("imgfile") [0];
Get the picture suffix name
String Fileext = imgname.substring (Imgname.lastindexof (".")). toLowerCase ();
Regenerate picture name
String IMGN = new Date (). GetTime () + Fileext;
The absolute path of the picture on the server. Editor does not provide the ability to delete pictures, this path can later be used for background program operation on the picture
String Serverpath = "D://program files//apache software foundation//tomcat 6.0//webapps//ssx//uploadimage//";
The reference address of the page
String Savepath = "http://127.0.0.1:8080/ssx/uploadimage/";
In practice, given the variability of the address, two paths here can be dynamically generated or read from a configuration file
Keuploadimage (Servletactioncontext.getrequest (), Servletactioncontext.getresponse (), ImgFile, ImgTitle, ImgWidth, ImgHeight, IMGN, Savepath, Serverpath);
return null;
}
void Keuploadimage (HttpServletRequest request, httpservletresponse response, File imgfile, String imgtitle, String ImgWidth, String imgheight, String imgname, String Savepath, String serverpath)
Throws FileNotFoundException, ioexception{
Write a picture to the server
Imageutils.uploadtoserver (Imgfile, Serverpath, imgname);
Page Echo
String id = "Content";
String url = savepath + imgname;
String border = "0";
String result = "<mce:script type=/" text/javascript/"><!--
Parent. ke.plugin[/"image/"].insert (/""
+ ID
+ "/",/""
+ URL
+ "/",/""
+ Imgtitle
+ "/",/""
+ ImgWidth
+ "/",/""
+ imgheight
+ "/",/""
+ Border + "/" "
+");
--></mce:script> ";
PrintWriter out = null;
out = Encodehead (request, response);
Out.write (result);
Out.close ();
}
PrintWriter encodehead (httpservletrequest request,httpservletresponse response) {
try {
Request.setcharacterencoding ("Utf-8");
Response.setcontenttype ("text/html; Charset=utf-8 ");
return Response.getwriter ();
} catch (Unsupportedencodingexception e) {
E.printstacktrace ();
return null;
} catch (IOException e) {
E.printstacktrace ();
return null;
}
}
Public File Getimgfile () {
return imgfile;
}
public void Setimgfile (File imgfile) {
This.imgfile = Imgfile;
}
Public String Getimgwidth () {
return imgwidth;
}
public void Setimgwidth (String imgwidth) {
This.imgwidth = ImgWidth;
}
Public String Getimgheight () {
return imgheight;
}
public void Setimgheight (String imgheight) {
This.imgheight = ImgHeight;
}
Public String getalign () {
return align;
}
public void Setalign (String align) {
This.align = align;
}
Public String Getimgtitle () {
return imgtitle;
}
public void Setimgtitle (String imgtitle) {
This.imgtitle = Imgtitle;
}
}
Referenced tool classes
[Java] View plaincopy
Package org.wusq.ssx.util;
Import Java.io.File;
Import Java.io.FileInputStream;
Import java.io.FileNotFoundException;
Import Java.io.FileOutputStream;
Import java.io.IOException;
/**
* Image processing Tool class
* @author WUSQ
* @since 2011-05-05
*/
public class Imageutils {
/**
* How images are uploaded to the server
* @param upload picture file
* @param serverpath the path saved on the server
* @param imgname Picture name
* @since 2011-05-05
*/
public static void Uploadtoserver (File upload, String serverpath, String imgname) throws FileNotFoundException, Ioexcepti on{
File Dirpath = new file (Serverpath);
if (!dirpath.exists ()) {
Dirpath.mkdirs ();
}
String Path = Dirpath + "//" + imgname;
FileOutputStream fos = new FileOutputStream (path);
FileInputStream fis = new FileInputStream (upload);
byte[] buffer = new byte[1024];
int len = 0;
while (len = fis.read (buffer)) > 0) {
Fos.write (buffer, 0, Len);
}
Fos.close ();
Fis.close ();
}
}
Turn from:
Kindeditor using and uploading images in the background processing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
