kindeditor自定义插件

来源：互联网发布：如何制作软件编辑：程序博客网时间：2024/06/03 07:19

kindeditor是一款比较好用的富文本，里面功能比较全面，还支持自定义插件。官网的自定义hello插件示例非常简单，想仿照此例做一个插入文本框的插件，一番折腾总算看到效果。

1.定义kindeditor/plugins/hello/hello.js

2.编写页面kedemo.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>kindeditordemo</title>
<meta name="robots" content="all">
<meta name="author" content="Design:Lyq; WebLayout:web-Lyq">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ke-icon-hello {

/**借用加超链接插件图标*/
background-image: url("../../js/kindeditor/themes/default/default.png");
background-position: 0px -624px;
width: 16px;
height: 16px;
}
</style>
</head>

<body style="overflow-x:hidden;overflow-y:auto">
<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
<br />
<input type="button" id="btnGet" name="btnGet" onclick="clickFunc()" value="单击获取富文本框内容" />

<script charset="utf-8" src="js/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="js/kindeditor/lang/zh-CN.js"></script>

<script type="text/javascript">
var content_copy;

//工具栏中插件的title
KindEditor.lang({
hello : '自定义工具栏插件标题-hello'
});

//自定义插件在倒数第二个位置
var items = [
'source', 'clearhtml', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'link', 'fullscreen', '|','hello','table'
];

KindEditor.ready(function(K) {
content_copy = K.create('textarea[name="content"]', {
items : items,
height : "100px",
allowFileManager : true,
autoHeightMode : true,
afterBlur : function(){
this.sync();
}
});
});

//获取富文本框内容看是否达到预期
function clickFunc(){
console.log(content_copy.html());
console.log(content_copy.text());
}
</script>
</body>
</html>

实际操作结果：点击插件插入了文本框，但是点击“单击获取富文本框内容”按钮后，获取的内容不全，<b>标签和<a>标签部分都有，但期望的<input />部分内容没有。

怀疑kindeditor脚本中对<b><a>做了预置，所以支持它们，<input />没有预置所有没有。

3.在kindeditor中添加对input标签的支持

做法：在kindeditor-all.js中找到htmlTags对象的定义代码，发现确实是对一些html标签做了预置，在htmlTags定义尾部加上对input的设置看看

,input : ['id', 'name', 'type', 'class', 'title', 'value', 'width', 'height']

实际操作结果：点击“单击获取富文本框内容”按钮后，看到期望输出的<input />标签内容。

这只是简单扩展demo，实际应用时应该点击插件图标后要弹窗窗口，让用户设置id、name、width、height、title等信息后，再确定。

更进一步的kindeditor/plugins/hello/hello.js示例

KindEditor.plugin('hello', function(K) {
var editor = this, name = 'hello';
editor.plugin.hello = {
helloFunc: function(e) {
editor.insertHtml('<b>世界，你好！</b>[百度官网：<a href="http://www.baidu.com">http://www.baidu.com</a>]文本框: <input type="text" id="demo" name="demo" />');
},
edit : function(){
//console.log(1);
html = '<div style="padding:20px;">' +
//url
'<div class="ke-dialog-row">' +
'<label for="keId" style="width:60px;">' + 'id' + '</label>' +
'<input class="ke-input-text" type="text" id="keId" name="id" value="" style="width:260px;" /></div>' +
'<div class="ke-dialog-row">' +
'<label for="keName" style="width:60px;">' + 'name' + '</label>' +
'<input class="ke-input-text" type="text" id="keName" name="name" value="" style="width:260px;" /></div>' +
'<div class="ke-dialog-row">' +
'<label for="keWidth" style="width:60px;">' + '宽度' + '</label>' +
'<input class="ke-input-text" type="text" id="keWidth" name="width" value="" style="width:260px;" /></div>' +
'<div class="ke-dialog-row">' +
'<label for="keHeight" style="width:60px;">' + '高度' + '</label>' +
'<input class="ke-input-text" type="text" id="keHeight" name="height" value="" style="width:260px;" /></div>' +
'<div class="ke-dialog-row">' +
'<label for="keTitle" style="width:60px;">' + '标题' + '</label>' +
'<input class="ke-input-text" type="text" id="keTitle" name="title" value="" style="width:260px;" /></div>' +
'</div>',
dialog = editor.createDialog({
name : name,
width : 450,
height : 300,
title : '插入文本框',
body : html,
yesBtn : {
name : '确定',
click : function(e) {
var inputId = K.trim(idBox.val());
var inputName = K.trim(nameBox.val());
var inputTitle = K.trim(titleBox.val());
var inputWidth = K.trim(widthBox.val());
var inputHeight = K.trim(heightBox.val());
if (!/^\d*$/.test(inputWidth)) {
alert("宽度必须是数字");
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(inputHeight)) {
alert("高度必须是数字");
heightBox[0].focus();
return;
}
editor.insertHtml('<input type="text" id="'+inputId+'" name="'+inputName+'" width="'+inputWidth+'" height="'+inputHeight+'" title="'+inputTitle+'" />').hideDialog().focus();
}
}
}),
div = dialog.div,
idBox = K('input[name="id"]', div),
nameBox = K('input[name="name"]', div),
widthBox = K('input[name="width"]', div),
heightBox = K('input[name="height"]', div),
titleBox = K('input[name="title"]', div);
}

};
// 点击图标时执行
editor.clickToolbar(name, editor.plugin.hello.edit);
});

0 0