如何在kindeditor添加自定义插件

如何在KindEditor编辑器中添加自定义插件。

首先看一下效果图：

上图中螃蟹做了一个IT学习者的自定义插件，就是那个小螃蟹。

当鼠标滑过时，会出现IT学习者的文字提示，点击时，会在编辑器中插入方括号中间的内容。

下面就讲解下是如何实现的(官方已经给出示范)。

1.在plugins文件夹下添加/itxxz/itxxz.js文件

js代码如下：

KindEditor.plugin('itxxz', function(K) {
var editor = this, name = 'itxxz';
// 点击图标时执行
editor.clickToolbar(name, function() {
editor.insertHtml('[IT学习者官网：<a href="http://www.itxxz.com">http://www.itxxz.com</a>] ');
});
});

2.定义文字提示，在页面的<script>标签里添加以下脚本。

KindEditor.lang({
itxxz : 'IT学习者'
});

3.定义图标显示样式，在页面的<style>标签里添加以下CSS。

<style>
.ke-icon-itxxz {
background-image: url(image/itxxz.jpg);
width: 16px;
height: 16px;
}
</style>

4.初始化编辑器。

KindEditor.ready(function(K) {
K.create('#itxxz_id', {
items : [
'fontname', 'fontsize', 'forecolor', '|','itxxz'
]
});
})

完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义插件-IT学习者</title>
<link rel="stylesheet" href="../themes/default/default.css" />
<style>
.ke-icon-itxxz {
background-image: url(image/itxxz.jpg);
width: 16px;
height: 16px;
}
</style>
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
KindEditor.lang({
itxxz : 'IT学习者'
});
KindEditor.ready(function(K) {
K.create('#itxxz_id', {
items : [
'fontname', 'fontsize', 'forecolor', '|','itxxz'
]
});
});
</script>
</head>
<body>
<h3>自定义插件-IT学习者[www.itxxz.com]</h3>
<textarea id="itxxz_id" name="content" style="width:700px;height:300px;"></textarea>
</body>
</html>

转载于http://www.itxxz.com/kindeditor/2014/1119/KindEditor-custom-plugin.html 感谢作者

如何在kindeditor添加自定义插件

猜你喜欢