关闭

kindeditor自定义插件

2428人阅读 评论(0) 收藏 举报

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


1.定义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" />');
        }
        };
        // 点击图标时执行
        editor.clickToolbar(name, editor.plugin.hello.helloFunc);
});


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-min.js"></script> -->
<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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1536802次
    • 积分:11858
    • 等级:
    • 排名:第1315名
    • 原创:103篇
    • 转载:244篇
    • 译文:0篇
    • 评论:126条
    文章分类
    最新评论