kindeditor自定义插件

谁借莪１个温暖的怀抱￠ 2022-08-22 14:18 347阅读 0赞

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" οnclick="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 />标签内容。

![20160530170111690][]

![20160530170139784][]

这只是简单扩展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);  
\});

[20160530170111690]: /images/20220722/d0df0eddc3ae44dbae3fc5b455fbdbbc.png
[20160530170139784]: /images/20220722/fe332f4225e040f1a3fb51175e3fb1a8.png