Kindeditor自定义插件

1. Kindeditor文件路径下 plugins文件夹下 新建miniprogram文件夹 新建miniprogram.js 
2. miniprogram.js 内容

KindEditor.plugin('miniprogram', function(K) {
	var editor = this, name = 'miniprogram';
	// 点击图标时执行
	editor.clickToolbar(name, function() {
	//弹出框主题
		var date ='<div style="margin:10px;">'
			+'<div class="ke-dialog-row">'
			+'<label style="width:80px;">默认链接</label>'
			+'<input class="ke-input-text" name="url" type="text">'
			+'</div><div class="ke-dialog-row">'
			+'<label style="width:80px;">小程序链接</label>'
			+'<input name="path" type="text">'
			+'<input class="ke-input-text" name="appid" type="hidden" value="wxd4daf5a66b681275">'
			+'</div></div>';
		var lang = editor.lang(name + '.');
		//弹出框
		var dialog = K.dialog({
	        width : 500,
	        title : '小程序',
	        body : date,
	        closeBtn : {
	                name : '关闭',
	                click : function(e) {
	                        dialog.remove();
	                }
	        },
	        yesBtn : {
	                name : '确定',
	                click : function(e) {
						var url = K.trim(urlBox.val());
						//校验url
						if (url == 'http://' || K.invalidUrl(url)) {
							alert(editor.lang('invalidUrl'));
							urlBox[0].focus();
							return;
						}
						var path = K.trim(pathBox.val());
						//检验地址
						if (path == 'http://' || K.invalidUrl(path)) {
							alert(editor.lang('miniPath'));
							pathBox[0].focus();
							return;
						}
						//调用方法
						editor.exec('createminiprogram', url,path);
						//关闭弹出框
						dialog.remove();
					
	                }
	        },
	        noBtn : {
	                name : '取消',
	                click : function(e) {
	                        dialog.remove();
	                }
	        }
	}),
	div = dialog.div,
	urlBox = K('input[name="url"]', div),
	pathBox = K('input[name="path"]', div);
	urlBox.val('http://');
	});

});

3.在需要添加自定义插件的页面 添加以下css

<style type="text/css">
.ke-icon-miniprogram {
    //自定义插件图标地址
	background-image: url(../kindeditor-4.1.7/themes/default/miniprogram.png);
	//自定义插件位置
	background-position: 0px 0px;
	//虽然限制了 但是没有用 还是手动把图片大小改成了16*16px的
	width: 16px;
	height: 16px;
}
</style>

4.修改zh_CN.js和kindeditor-all.js 以防万一两个都改掉 能确定引用哪一个的话 可以只写一个

    //方法名
	miniprogram:'小程序',
	//校验提示
	miniPath : "请输入小程序地址。",
	//文本框字
	'miniprogram.url':'默认链接',
	'miniprogram.miniprogramUrl':'小程序链接',

5.页面引入

<link rel="stylesheet" href="${pageContext.request.contextPath }/kindeditor-4.1.7/themes/default/default.css" />
<script charset="utf-8" src="${pageContext.request.contextPath }/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath }/kindeditor-4.1.7/lang/zh_CN.js"></script>

 因为页面引入的是kindeditor.js 所以后面的修改的js文件 没有特殊表明的话 都是kindeditor.js这个

6.添加createminiprogram方法

createminiprogram : function(url, path) {
		var self = this, doc = self.doc, range = self.range;
		var html = '<a  data-miniprogram-appid="wxd4daf5a66b681275" data-miniprogram-path="'+path+'" href="' + _escape(url) + '"';
		//如果没有选择任何文字
		if (range.collapsed) {
			html += '>' + _escape(url) + '</a>';
			return self.inserthtml(html);
		}
		//原生createlink里这样写的 然而debug也没走...不懂
		if (range.isControl()) {
			var node = K(range.startContainer.childNodes[range.startOffset]);
			html += '></a>';
			node.after(K(html, doc));
			node.next().append(node);
			range.selectNode(node[0]);
			return self.select();
			//不加else  选中文字后添加没有效果  
		}else{
			var node = K(range.startContainer.childNodes[range.startOffset]);
			html += '></a>';
			node.after(K(html, doc));
			node.next().append(node);
			range.selectNode(node[0]);
			return self.select();
		}
		//没看懂 大概是源码模式切回来之后重新给值的感觉???
		_nativeCommand(doc, 'createminiprogram', '__kindeditor_temp_url__');
		K('a[href="__kindeditor_temp_url__"]', doc).each(function() {
			K(this).attr('href', url).attr('data-miniprogram-appid', 'wxd4daf5a66b681275').attr('data-miniprogram-path',path);
		});
		return self;
	}

7.设置属性放行*** 如果你有自定义属性的话,一定要注意属性放行!不然切换到源码模式的时候 就会干掉你的自定义属性.血泪教训... 

Kindeditor文档

转载于:https://my.oschina.net/u/3660168/blog/1841570