kindeditor编辑器添加自定义插件的方法

  • 时间:
  • 浏览:2
  • 来源:幸运快3_快3下载app送28_幸运快3下载app送28

  KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果。说实话在使用你你你你這個编辑器过后,我也使用过别的编辑器,最后都在导致 着使用麻烦,全都 导致 着应用程序太臃肿,而放弃使用,过后KindEditor不同,不仅底部形态小巧,过后功能强大,最主要的是它采用插件的开发管理最好的法子,能很容易再它的基础上去掉 插件来实现被委托人的功能

  小编在使用KindEditor过程中,随着使用时间的加长,发现KindEditor有一1个 最大的欠缺,那全都 不支持文件的上传,全都到网上搜了全都相关的资料,发现还可以被委托人加插件到KindEditor中,现架构设计 最好的法子如下:

一.打开kindeditor.js文件

  1.找到KE.lang,如下图所示:



在里面加入以下语录:

accessory : '插入附件',

invalidAccessory : "请输入有效的URL地址。只允许rar,zip格式。",

  2.在KE.setting中加入将该功能加入到kindeditor中,加入后的截图如下:

二、经过第一步后,准备工作导致 着作完了,下面全都 编写有关上传附件的核心代码,将以下的代码加入到kindeditor.js文件中,加入到该文件的最后    })(KindEditor);过后 及上有一1个 “;”过后即可

KE.plugin['accessory'] = {

click : function (id) {

KE.util.selection(id);

this.dialog = new KE.dialog({

id : id,

cmd : 'accessory',

file : 'accessory.html',

width : 310,

height : 55,

loadingMode : true,

title : KE.lang['accessory'],

yesButton : KE.lang['yes'],

noButton: KE.lang['no']

});

this.dialog.show();

},

check: function (id) {

var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);

var url = KE.$('accessoryFile', dialogDoc).value;

if (url.match(/\.(rar|zip)$/i) == null) {

alert(KE.lang['invalidAccessory']);

window.focus();

KE.g[id].yesButton.focus();

return false;

}

return true;

},

exec : function (id) {

var self = this;

var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe);

if (!this.check(id)) return false;

KE.$('editorId', dialogDoc).value = id;

var uploadIframe = KE.$('uploadIframe', dialogDoc);

KE.util.showLoadingPage(id);

var onloadFunc = function() {



KE.event.remove(uploadIframe, 'load', onloadFunc);

KE.util.hideLoadingPage(id);

var uploadDoc = KE.util.getIframeDoc(uploadIframe);

var data = '';

try {

data = KE.util.parseJson(uploadDoc.body.innerHTML);

} catch(e) { alert(KE.lang.invalidJson); }

if (typeof data === 'object' && 'error' in data) {

if (data.error === 0) {

self.insert(id, data.url,data.filename);

} else {

alert(data.message);

return false;

}

}

};

KE.event.add(uploadIframe, 'load', onloadFunc);



dialogDoc.uploadForm.submit();

return;



},

insert : function (id, url, filename) {

KE.util.insertHtml(id, '<a href="' + url + '" >'+filename+'</a>');

this.dialog.hide();

KE.util.focus(id);

}

};

注意最后的分号

三、在plugins文件夹中增去掉 传附件的文件,文件名为accessory.html,你你你你這個名字还可以在以上的代码中修改(修改以上代码中的红色每段,即可)

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Accessory</title>

<style type="text/css">

body { font-size: 12px; margin: 0px; background: #F0F0EE; overflow: hidden; }

</style>

<script type="text/javascript">

var KE = parent.KindEditor;

location.href.match(/\?id=([\w-]+)/i);

var id = RegExp.$1;

KE.event.ready(function () { KE.util.hideLoadingPage(id); }, window, document);

</script>

</head>

<body>

<iframe name="uploadIframe" id="uploadIframe" ></iframe>

<form name="uploadForm" method="post" enctype="multipart/form-data" action="upload.jsp"target="uploadIframe">

<input type="hidden" id="editorId" name="id" value="" />

<table border="0" cellpadding="0" cellspacing="0" align="center">

<tr><td><input type="file" id="accessoryFile" name="accessoryFile" /></td></tr>

</table>

</form>

</body>

</html>

四、编写附件上传的除理页面,这里使用jsp进行编写,以上的红色每段,即是要提交到的除理页面,这里upload.jsp和accessory.html在有一1个 文件夹下,你们 也还可以上放别的文件夹下,过后改一下里面代码的action值就还可以了,upload.jsp内容如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page import="java.util.*,java.io.*" %>

<%@ page import="java.text.SimpleDateFormat" %>

<%@ page import="org.apache.commons.fileupload.*" %>

<%@ page import="org.apache.commons.fileupload.disk.*" %>

<%@ page import="org.apache.commons.fileupload.servlet.*" %>

<%@ page import="org.json.simple.*" %>

<%

//文件保存目录路径



String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";

//文件保存目录URL

String saveUrl = request.getContextPath() + "/attached/";

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

String[] fileTypes = new String[]{"rar", "zip"};

//最大文件大小

long maxSize = 4000000;

response.setContentType("text/html; charset=UTF-8");

if(!ServletFileUpload.isMultipartContent(request)){



out.println(getError("请选着文件。"));

return;

}

//检查目录

File uploadDir = new File(savePath);

if(!uploadDir.isDirectory()){

out.println(getError("上传目录不处于。"));

return;

}

//检查目录写权限

if(!uploadDir.canWrite()){

out.println(getError("上传目录这样写权限。"));

return;

}

FileItemFactory factory = new DiskFileItemFactory();



ServletFileUpload upload = new ServletFileUpload(factory);

upload.setHeaderEncoding("UTF-8");

List items = upload.parseRequest(request);

Iterator itr = items.iterator();

while (itr.hasNext()) {

FileItem item = (FileItem) itr.next();

String fileName = item.getName();

long fileSize = item.getSize();

if (!item.isFormField()) {

//检查文件大小

if(item.getSize() > maxSize){

out.println(getError("上传文件大小超过限制。"));

return;

}

//检查扩展名

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

if(!Arrays.<String>asList(fileTypes).contains(fileExt)){

out.println(getError("上传文件扩展名是不允许的扩展名。"));

return;

}

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

String newFileName = df.format(new Date()) + "_" + new Random().nextInt(4000) + "." + fileExt;

try{

File uploadedFile = new File(savePath, newFileName);

item.write(uploadedFile);

}catch(Exception e){

out.println(getError("上传文件失败。"));

return;

}

JSONObject obj = new JSONObject();



obj.put("error", 0);

obj.put("url", saveUrl + newFileName);

obj.put("filename",fileName);

out.println(obj.toJSONString());

}

}

%>

<%!

private String getError(String message) {

JSONObject obj = new JSONObject();

obj.put("error", 1);

obj.put("message", message);

return obj.toJSONString();

}

%>

五、修改skins目录里的default.gif,增加附件图标,可采用photoshop等图片除理软件,在default.gif的最里面加有一1个 附件图标,大小为16*16px的即可

六、修改skins目录里的default.css,加入

.ke-icon-accessory

{

background-position: 0px -9400px;

width: 16px;

height: 16px;

}

七、测试效果如下:

八、完成

KindEditor下载

Tags: kindeditor   去掉 插件   自定义插件  
责任编辑:190