針對kindeditor編輯器的修改記錄整理

一、KindEditor自動過濾首行縮進和全角空格的解決方法(初始化)

KindEditor 4.1.11：
kindeditor-all.js 文件中大致第752行：
/(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>(\s*)/g;
kindeditor-all-min.js 文件中通過/(\s*)搜索：
var h=/(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>(\s*)/g
賦值的正則表達式替換爲：
/([\f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\r\t\v]*)/g

簡單來說，就是把第一個和最後一個 \s 替換成 [ \f\n\r\t\v]

KindEditor 4.1.10：
kindeditor.js 文件的第754行：
var re = /(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>(\s*)/g;
改爲
var re = /([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\r\t\v]*)/g;

二、上傳MP4視頻（HTML5）

1.修改asp文件夾下的upload_json.asp文件
在mediaExtStr後面添加 ‘mp4’

'定義允許上傳的文件擴展名
imageExtStr = "gif|jpg|jpeg|png|bmp"
flashExtStr = "swf|flv"
mediaExtStr = "swf|flv|mp3|wav|wma|wmv|mid|avi|mpg|asf|rm|rmvb|mp4"
fileExtStr = "doc|docx|xls|xlsx|ppt|htm|html|txt|zip|rar|gz|bz2"
'最大文件大小
maxSize = 5 * 1024 * 1024 '5M

2.在kindeditor-all.js 文件中大致第953行
修改 ‘function _mediaEmbed(attrs) ’ 如下：

function _mediaEmbed(attrs) {
	//判斷是否是mp4文件
    if (attrs.src.indexOf(".mp4")!=-1) {
		var html = '<div style="text-align:center;">'
		html += '<video controls="controls" height="420">'
		html += '<source src="' + attrs.src + '">'
		html += '<source src="' + attrs.src + '" type="video/mp4">'
		html += 'Your browser does not support the video tag.'
		html += '</video></div><div><br></div>'
		return html;
    }
	else{
		var html = '<embed ';
		_each(attrs, function(key, val) {
			html += key + '="' + val + '" ';
		});
		html += '/>';
		return html;
	}
}

修改kindeditor-all-min.js如下：
function _mediaEmbed(a){ else{var b="<embed ";return _each(a,function(a,c){b+=a+'="'+c+'" '}),b+="/>"}
替換爲
function _mediaEmbed(a){ if (a.src.indexOf(".mp4")!=-1) { return '<div style="text-align:center;"><video controls="controls" height="420"><source src="' + a.src + '"><source src="' + a.src + '" type="video/mp4">Your browser does not support the video tag.</video></div><div><br></div>'}else{var b="<embed ";return _each(a,function(a,c){b+=a+'="'+c+'" '}),b+="/>"}}

三、更改換行模式

關鍵元素：newlineTag:'br',//'br' 或'p'

方法一（統一默認修改）
默認的 kindeditor.js 文件中

K.options = {
	...
	newlineTag : 'p',
	resizeType : 2,
	...

方法二（創建新表時添加）

editor = K.create('textarea[name="content"]', {
		...
		newlineTag : 'p'
		...
	});

四、簡單模式

var editor;
KindEditor.ready(function(K) {
	editor = K.create('textarea[name="content"]', {
		resizeType : 1,
		allowPreviewEmoticons : false,
		allowImageUpload : false,
		items : [
			'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
			'insertunorderedlist', '|', 'emoticons', 'image', 'link']
	});
});

五、標籤過濾

修改 kindeditor.js 文件中的 htmlTags 內容，不需要過濾的添加上去即可。

	htmlTags : {
		font : ['id', 'class', 'color', 'size', 'face', '.background-color'],
		span : [
			'id', 'class', '.color', '.background-color', '.font-size', '.font-family', '.background',
			'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
		],
		div : [
			'id', 'class', 'align', '.border', '.margin', '.padding', '.text-align', '.color',
			'.background-color', '.font-size', '.font-family', '.font-weight', '.background',
			'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
		],
		table: [
			'id', 'class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
			'.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
			'.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
			'.width', '.height', '.border-collapse'
		],
		'td,th': [
			'id', 'class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
			'.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
			'.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
		],
		a : ['id', 'class', 'href', 'target', 'name'],
		embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'wmode', 'bgcolor', 'allowfullscreen' , 'flashvars', 'pluginspage' , 'menu'],
		img : ['id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
		'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
			'id', 'class', 'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
			'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
		],
		pre : ['id', 'class'],
		hr : ['id', 'class', '.page-break-after'],
		'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : ['id', 'class'],
		iframe : ['id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height'],
		video : ['controls', 'autoplay', 'loop', 'preload', 'src', 'onplay', 'poster', 'width', 'height', 'onclick'],
		source : ['src', 'type']		
	},

參考：1.https://www.cnblogs.com/dudumao/p/9471896.html