富文本編輯器：KindEditor+Struts2 筆記2

 背景：之前那個是上次緊急搞定，也沒去多想。過了這麼就，甲方覺得個性要強一點，結果活又來了。

好了，重新整理了下KE。

1. strut2  能返回json對象（http://blog.csdn.net/fyw_wu/article/details/10076257）

2. KindEditor 的配置

KindEditor.ready(function(K) {
	window.editor = K.create('#content', {
		width : '670px',
		height : '480px',
		cssPath : [ '../plugins/kindeditor/plugins/code/prettify.css' ],
		uploadJson : 'fileManager_uploadImage.action',//這裏是我上傳圖片/附件的後臺處理，就是上面的strut2配置對應的。
		fileManagerJson : 'plugins/kindeditor/jsp/file_manager_json.jsp',
		allowFileManager : true,
		filterMode : false,
		resizeType : 1,
		items : [],//工具欄（我是自己寫方法調用，所以不用KindEditor生產）
		newlineTag : "br",
		autoHeightMode : true,//自適應高度
		afterCreate : function() {
			var self = this;
			self.loadPlugin('autoheight', function() { //自適應高度
				self.edit.afterChange();
			});			

			K.ctrl(document, 13, function() {//鍵盤監聽
				self.sync();
			});
			K.ctrl(self.edit.doc, 13, function() {//鍵盤監聽
				self.sync();
			});
		}
	});
	prettyPrint();
});

3.我的自定義調用方法。

我把調用方法分爲2類，一類是直接操作文本內容的（例如 加超鏈接），另一類是需要中間步驟的（例如 改變字體，它會彈出一個選字體的對話框）對話框所以，對應前面一類 就只需要直接調用 方法就行。 對於後面哪一類，就需要給彈出對話框一個展示的地方。

//需要中間步驟的
// 字體顏色
function my_colr(obj) {
	editor.toolbar._itemMap['forecolor'] = KindEditor('#color');//我的頁面上有一個空的<div id='color'></div> 元素用來展示顏色集的
	editor.clickToolbar("forecolor");
}


// 字體大小
function my_font(obj) {
	editor.toolbar._itemMap['fontsize'] = KindEditor('#font');//同上
	editor.clickToolbar("fontsize");
}

//直接操作文本內容的
// 超鏈接
function my_link() {
	editor.clickToolbar("link");
}


// 水平分割線
function my_hr() {//這功能是沒有的，是我自定義的 下面有說明
	editor.clickToolbar("plug_hr");
}
// 插入標題
function insertTitle() {
	editor.clickToolbar("plug_title");
}
//圖片
function my_picktrue(obj) {
	editor.clickToolbar("image");
}

3.自定義功能按鈕

自定好了，就可以像其他普通按鈕一樣使用了

// 自定義插件 水平分割線 hr
KindEditor.lang( {
	plug_hr : '插入水平分割線'
});

KindEditor.plugin('plug_hr', function(K) {
	var self = this, name = 'plug_hr';
	self.clickToolbar(name, function() {
		self.insertHtml("<p><hr/></p>");
	});
});

自己建了個羣，有問題歡迎來羣裏討論。羣號：296538907

KE官網API地址： http://www.kindsoft.net/doc.php

如果有需要，可以提供我寫的代碼。