KindEditor/添加自定义插件
来自站长百科
- 添加"你好"插件
1、定义KE.lang['hello'] = "你好"。
KE.lang['hello'] = "您好";
2、定义KE.plugin['hello']，所有逻辑都在这个对象里，点击图标时默认执行click方法。
KE.plugin['hello'] = {
click : function(id) {
alert("您好");
}
};
3、页面里添加图标定义CSS。
.ke-icon-hello {
background-image: url(./skins/default.gif);
background-position: 0px -672px;
width: 16px;
height: 16px;
}
4、最后调用编辑器时items数组里添加hello。
KE.show({
id : 'content1',
items : ['hello']
});
完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<style>
.ke-icon-hello {
background-image: url(../skins/default/default.gif);
background-position: 0px -672px;
width: 16px;
height: 16px;
}
</style>
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
KindEditor.lang({
hello : '你好'
});
KindEditor.ready(function(K) {
K.create('#id', {
items : ['hello']
});
});
</script>
</head>
<body>
<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
</body>
</html>
- 添加插入远程图片的插件
1、定义KE.lang['remote_image'] = "插入远程图片"。
KE.lang['remote_image'] = "插入远程图片";
2、定义KE.plugin['remote_image']。
KE.plugin['remote_image'] = {
click : function(id) {
KE.util.selection(id);
var dialog = new KE.dialog({
id : id,
cmd : 'remote_image',
width : 310,
height : 90,
title : KE.lang['image'],
yesButton : KE.lang['yes'],
noButton : KE.lang['no']
});
dialog.show();
},
check : function(id) {
var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
var url = KE.$('url', dialogDoc).value;
var title = KE.$('imgTitle', dialogDoc).value;
var width = KE.$('imgWidth', dialogDoc).value;
var height = KE.$('imgHeight', dialogDoc).value;
var border = KE.$('imgBorder', dialogDoc).value;
if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) {
alert(KE.lang['invalidImg']);
window.focus();
KE.g[id].yesButton.focus();
return false;
}
if (width.match(/^\d+$/) == null) {
alert(KE.lang['invalidWidth']);
window.focus();
KE.g[id].yesButton.focus();
return false;
}
if (height.match(/^\d+$/) == null) {
alert(KE.lang['invalidHeight']);
window.focus();
KE.g[id].yesButton.focus();
return false;
}
if (border.match(/^\d+$/) == null) {
alert(KE.lang['invalidBorder']);
window.focus();
KE.g[id].yesButton.focus();
return false;
}
return true;
},
exec : function(id) {
KE.util.select(id);
var iframeDoc = KE.g[id].iframeDoc;
var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
if (!this.check(id)) return false;
var url = KE.$('url', dialogDoc).value;
var title = KE.$('imgTitle', dialogDoc).value;
var width = KE.$('imgWidth', dialogDoc).value;
var height = KE.$('imgHeight', dialogDoc).value;
var border = KE.$('imgBorder', dialogDoc).value;
this.insert(id, url, title, width, height, border);
},
insert : function(id, url, title, width, height, border) {
var html = '<img src="' + url + '" ';
if (width > 0) html += 'width="' + width + '" ';
if (height > 0) html += 'height="' + height + '" ';
if (title) html += 'title="' + title + '" ';
html += 'alt="' + title + '" ';
html += 'border="' + border + '" />';
KE.util.insertHtml(id, html);
KE.layout.hide(id);
KE.util.focus(id);
}
};
3、页面里添加图标定义CSS。
.ke-icon-remote_image {
background-image: url(./skins/default.gif);
background-position: 0px -496px;
width: 16px;
height: 16px;
}
4、最后调用编辑器时items数组里添加remote_image。
KE.show({
id : 'content1',
items : ['remote_image']
});
参考来源[ ]
KindEditor使用手册导航 | ||||||
|---|---|---|---|---|---|---|
|