实现 elx-imgbox kindeditor 插件

关于elx-imgbox的文档

1、创建kindeditor插件文件

添加kindeditor/plugins/imgbox/imgbox.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
KindEditor.plugin('imgbox', function(K) {
var editor = this, name = 'imgbox';
var opts = {
uploadUrl: editor.imgboxUploadUrl,
listUrl: editor.imgboxListUrl,
multiple: true,
limit: 10,
onSelect: function(img){
editor.insertHtml('<img src="' + img.url + '" />');
}
};

// 点击图标时执行
editor.clickToolbar(name, function() {
Vue.elxImgbox(opts);
});
});

2、定义语言

在页面的<script>标签里添加以下脚本

1
2
3
KindEditor.lang({
imgbox : '图片'
});

3、定义工具栏图标的CSS

在页面的<style>标签里添加以下CSS

1
2
3
4
5
6
/* 文本编辑器工具栏上的imgbox图标,直接使用kindeditor的图片上传图标 */
.ke-icon-imgbox {
background-position: 0px -496px;
width: 16px;
height: 16px;
}

4、编辑器工具栏设置

调用编辑器时items数组里添加 imgbox

1
2
3
K.create('#id', {
items : ['imgbox']
});

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>imgbox</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.5/theme-chalk/index.css">
<style>
/* 文本编辑器工具栏上的imgbox图标,直接使用kindeditor的图片上传图标 */
.ke-icon-imgbox {
background-position: 0px -496px;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.0.5/index.js"></script>
<script src="http://imgbox.imcm.me/dist/imgbox.js"></script>
<script src="kindeditor/kindeditor.js"></script>
<script>
KindEditor.lang({
imgbox : '图片'
});
KindEditor.ready(function(K) {
K.create('#editor_id', {
items : ['imgbox'],
// 图片上传服务器端处理链接
imgboxUploadUrl: 'http://imgbox.imcm.me/test/upload.json',
// 图片库数据获取链接
imgboxListUrl: 'http://imgbox.imcm.me/test/list.json',
});
});
</script>
</body>
</html>