晓夏

小皇

教育信息化方案砖家

KindEditor添加自定义模板插件

浏览量:461

kindeditor添加自定义插件,添加“自定义模板”插件 


1、添加plugins/customtemplate/customtemplate.js文件。

内容如下:

KindEditor.plugin('customtemplate', function(K) {
	var self = this, name = 'customtemplate';
	self.clickToolbar(name, function() {
	
		var lang = self.lang(name + '.'),
			html = ['<div style="padding:10px 20px;">',
				'<div class="ke-dialog-row">',
				'<select class="ke-customtemplate-type">',
				'<option value="1">Other</option>',
				'</select>',
				'</div>',
				'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
				'</div>'].join(''),
			dialog = self.createDialog({
				name : name,
				width : 450,
				title : self.lang(name),
				body : html,
				yesBtn : {
					name : self.lang('yes'),
					click : function(e) {
							customtemplatehtml = textarea.val(),//读取文本域的内容
						self.insertHtml(customtemplatehtml).hideDialog().focus();
					}
				}
			}),
			textarea = K('textarea', dialog.div);
			///manage/template/ShowTemplates,这个是我的一个网页列出的option选项
			$.get('/manage/template/ShowTemplates',function(data,status){
				$('.ke-customtemplate-type').append(data);
			});
			
			//manage/template/ShowTemplate
			//上面这个是输出了模板内容
			//$(this).children('option:selected').val(),这个是Option的value值
			$('.ke-customtemplate-type').change(function(){
				$.get('/manage/template/ShowTemplate/'+$(this).children('option:selected').val(),function(data,status){
					$('.ke-textarea').html(data);
				});
			})
		textarea[0].focus();
	});
	
});

入下图所示,对照着看下:

image.png

2、定义语言,修改lang/zh_CN.js文件。添加以下代码。 
 customtemplate:'插入自定义模板',

3、修改themes/default/default.png图片和default.css文件

default.css文件添加如下代码

.ke-icon-customtemplate {
 background-position: 0px -128px;
 width: 16px;
 height: 16px;
}


4、添加调用编辑器时items数组里添加customtemplate插件,修改kindeditor.js文件,找到Items选项,添加 customtemplate

神回复

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。