【问题日记】KindEditor编辑器 与 vue脚手架

1.  运行安装命令 ：  

npm install kindeditor

2. 在main.js 中一定要import css 否则看不到工具栏：

import Vue from 'vue'
import App from './App.vue'
import kindeditor from 'kindeditor'
import 'kindeditor/themes/default/default.css'

Vue.use(kindeditor)
Vue.use(ElementUI, {
  size: 'small'
})

//写一个指令在dom渲染后触发，因为非vue的插件必须dom存在的情况下才可以执行，否则会报错找不到实例。把指令绑定到组件中即可；
Vue.directive('loaded-callback', {
  inserted: function(el, binding, vnode) {
    binding.value(el, binding, vnode)
  }
})

 

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 = '';
		return html;
	}
	else {
	var html = '';
	return html;}
}

 最后可以参考百度中其他博主的做法；

3. 类似模板库的设计（对于排版能力有限的编辑者非常好用） 

做几款本地的模板库，选择即可加入编辑器排版，类似于《微信编辑器模板》

首先，在本地编辑好模板，样式全部写在行内，参考《微信编辑器模板》的做法；

第二，做点击触发事件，insertHtml 在光标处插入模板代码（模板代码需要字符串类型），微信文章的图片是不能被直接复制的，所以不要去复制微信内文章

第三，编辑器会把嵌套的双引号接卸成属性，可能会转义url 的字符串，可以用replace 替换。

// 将dom 转换成字符串 并且替换双引号
parseDom: function(arg) {
            var arg = arg.innerHTML
            var replaced = arg.replace(/"/g, '')
            return replaced
 },

效果示例：