【问题日记】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
 },

效果示例：