如何使用kindeditor插件

把解压出来的 kindeditor 文件夹，放置到网站的根目录中；注意，为了实现视频显示页面位置不受限制同时不用改变视频调用代码，本插件文件引用均以相对跟目录的绝对路径，如果不放在根目录，对应路径需要全部修改，否则不能正常显示；建议不要改动

在发布文集页面调用已加入视频播放器插件的kindeditor，调用方法参照http://www.kindsoft.net/docs/usage.html 中的说明。如果自定义配置了辑器的工具栏的情况下，请务必在 items 加入 'insertfile'，位置无要求

如：

items : [

'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', '并缓code', 'cut', 'copy', 'paste',

'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',

'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',

'flash', 'media','insertVideo', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',

'anchor', 'link', 'unlink', '|', 'about'

],

对于通过插件工具栏按钮插入李码生成的代码不要改动，均有其作用的

在显示文集页面调用视频播放器ckplayer

<script charset="utf-8" src="/kindeditor/plugins/insertVideo/ckplayer/ckplayer.js"></script>绝扰模

完成以上步骤即可，使用本插件。

1

首先我们需要kindeditor及其相关文件，这些文件可以去网上找，很容易找到。

2

下载完成后会看到很多文件，但是我们只需蔽告要其中的三个主要文件，如下图，把这三个文件拷贝到你的项目中，不要忘记jQuery文件。

3

然亮薯后就是使用方法了，其实宏键明这个kindeditor就是把textare框美化了一下，添加了一些功能。所以在html中，我们需要有一个textare框，给它一个id。

4

之后我们需要引入jQuery及kindeditor的js文件，其它的文件kindeditor会自动调用，不必手动引用。然后在js中写相关的语句就可以了，如下图：

5

kindeditor的长度和宽度都可以通过参数来设置，其中width来设置宽度，最好用百分数，height来设置高度。

KindEditor.create('#editor_id',{allowImageUpload:false,resizeType : 1,width:"50%",height:"200px"})

6

除了用参数设置kindeditor大小之外，我们看html源码还可以看到kindeditor大小由class为ke-container和ke-container-default所在的div控制，所以我们可以给ke-container和ke-container-default设置一个宽度和高度，要确保其优先级最高，所以加！important。

.ke-container.ke-container-default{

width:600px!important

height:100px!important

}

<tr >

<t d >

图片上传

</td >

<td colspan="5" align="left" style="text-align: left" >

<div id="filediv_infvaluelog_pic" >

</div >

<input type="button" id="file_btn_infvaluelog_add_pic" value="上传" />

</td >

</tr >

2.脚本代码

var uploadbutton3 = KindEditor.uploadbutton( {

button : KindEditor('#file_btn_infvaluelog_add_pic'),

fieldName : 'file',

url : 'upload_file_XXX_json?dir=image', //文件上传的action，设置dir为image

afterUpload : function(data) {

if (data.error === 0) {

//正确的时候执行

} else {

//上传错误后，提示

alert(data.message)

}

},

afterError : function(str) {//没正确执行时异常

alert('自定义错误信息: ' + str)

}

})

uploadbutton3.fileBox.change(function(e) {

uploadbutton3.submit()

})

})

3.action方法

public String fileupload() throws FileNotFoundException{

//最大文件大小

long maxSize = 1000000

InputStream is = null

if(imgFile!=null&&imgFile.isFile()){

is = new FileInputStream(imgFile)//传过来的文件

}else{

if(file.isFile()){

imgFile=file

imgFileFileName=fileFileName

is = new FileInputStream(imgFile)//传过来的文件

}else{

error = 1

message = "请纤肆喊选择要上雹塌传的文件。"

}

}

HttpServletRequest request = ServletActionContext.getRequest()

String savePath = null

String saveUrl = null

//检查目录

File rootDir = new File(savePath)

if(!rootDir.isDirectory()){

error = 1

message = "上传根目录不存在。"

}

//检查目录写权限

if(!rootDir.canWrite()){

error = 1

message = "上传根目录没有写权限。"

}

String dirName = null

if (dir == null) {

dirName = "other"

}else{

dirName = dir

}

//创建文件夹

savePath += "/"+dirName + "/"

saveUrl += "/"+dirName + "/"

File saveDirFile = new File(savePath)

if (!saveDirFile.exists()) {

saveDirFile.mkdirs()

}

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd")

String ymd = sdf.format(new Date())

savePath += ymd + "/"

saveUrl += ymd + "/"

File dirFile = new File(savePath)

if (!dirFile.exists()) {

dirFile.mkdirs()

}

//检查文毁野件大小

if(imgFile.length() >maxSize){

error = 1

message = "上传文件大小超过限制。"

}else{

//定义允许上传的文件扩展名

HashMap extMap = new HashMap()

extMap.put("image", "gif,jpg,jpeg,png,bmp")

extMap.put("flash", "swf,flv")

extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb")

extMap.put("file","gif,jpg,jpeg,png,bmp,doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2")

//检查扩展名

String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase()

if(!Arrays.asList(extMap.get(dirName).split(",")).contains(fileExt)){

error = 1

message = "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"

}else{

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss")

String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "_"

try{

if(imgFileFileName.indexOf(",")!=-1){

imgFileFileName=imgFileFileName.replaceAll(",", "")

}

File deskFile = new File(savePath+newFileName+imgFileFileName)

OutputStream os = new FileOutputStream(deskFile)

byte[] bytefer = new byte[1024]

int length = 0

while ((length = is.read(bytefer)) != -1) {

os.write(bytefer, 0, length)

}

os.close()

is.close()

error = 0

//message = "上传文件成功"

//url = urlRoot + saveUrl + newFileName + imgFileFileName

if("file".equals(dir)){

url = savePath + newFileName + imgFileFileName

}else{

url = saveUrl + newFileName + imgFileFileName

}

url = url.trim().replaceAll("\\\\\\\\", "/")

url = url.replaceAll("\\\\", "/")

//检查是否是图片，是才进行压缩

if(url.endsWith(".jpg")||url.endsWith(".jpeg")||url.endsWith(".png")||url.endsWith(".bmp")||url.endsWith(".gif")){

//压缩

ImgProce ip = new ImgProce()

ip.setWideth(400)

ip.proce(savePath+newFileName+imgFileFileName, "400")

}

}catch(Exception e){

error = 1

message = "上传文件失败。"

}

}

}

this.map=new HashMap()

this.map.put("error", error)

if(error==0){

this.map.put("url", url)

this.map.put("filename",imgFileFileName)

}else{

this.map.put("message", message)

}

return "SUCCESS"

}