【問題日記】KindEditor編輯器

1.初始化配置---插入圖片

uploadJson:上傳路徑

fileManagerJson:預覽路徑（圖片空間）  //配置好可以瀏覽上傳圖片記錄，圖片顯示不了需要後臺修改爲絕對路徑；圖片空間很好用，可複用選擇圖片；

 //編輯器內容發生變化後執行的回調函數。
afterChange: function() {
    this.sync()
},
//圖片上傳後，將上傳內容同步到textarea中
afterUpload: function() {
   this.sync()
}, 
//失去焦點時，將上傳內容同步到textarea中
afterBlur: function() {
   this.sync()
}, 

2.上傳視頻

首先KindEditor的embed 標籤沒有問題，只需要把'type'屬性改爲相應的格式 或者 去掉 ；

第二可以判斷上傳文件的後綴爲‘mp4’或者其他視頻格式，可替換爲video標籤；

// kindeditor-all.js

function _mediaImg(blankPath, attrs) {
	var width = attrs.width,
		height = attrs.height,
		type = attrs.type || _mediaType(attrs.src),
		srcTag = _mediaEmbed(attrs),
		style = '';
	if (/\D/.test(width)) {
		style += 'width:' + width + ';';
	} else if (width > 0) {
		style += 'width:' + width + 'px;';
	}
	if (/\D/.test(height)) {
		style += 'height:' + height + ';';
	} else if (height > 0) {
		style += 'height:' + height + 'px;';
	}
	if (attrs.src.indexOf(".mp4") != -1) {
		var html = '<video controls="" width="100%" class="' + _mediaClass(type) + '" ';
		html += '><source src="' + attrs.src + '" data-ke-src="' + attrs.src + '" >'
		html += '</video>';
		return html;
	}
	else {
	var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
	if (style !== '') {
		html += 'style="' + style + '" ';
	}
	html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
	return html;}
}

 最後可以參考百度中其他博主的做法；

3. 類似模板庫的設計（對於排版能力有限的編輯者非常好用） 

做幾款本地的模板庫，選擇即可加入編輯器排版，類似於《微信編輯器模板》

首先，在本地編輯好模板，樣式全部寫在行內，參考《微信編輯器模板》的做法；

第二，做點擊觸發事件，insertHtml 在光標處插入模板代碼（模板代碼需要字符串類型），微信文章的圖片是不能被直接複製的，所以不要去複製微信內文章

第三，編輯器會把嵌套的雙引號接卸成屬性，可能會轉義url 的字符串，可以用replace 替換。

// 將dom 轉換成字符串 並且替換雙引號
parseDom: function(arg) {
            var arg = arg.innerHTML
            var replaced = arg.replace(/"/g, '')
            return replaced
 },

效果示例：