vue-kindeditor 安装和解决问题

效果图

 kindeditor 引入

    一、去官网下载 kindeditor 包  官方链接

        

  二、在vue里的static文件夹下 创建一个 文件夹名字叫 kindeditor， 把下载好的文件放在这里

 三、在 公共组件 components 下 创建kindeditor.vue 文件

四、在src文件里面创建文件夹名字叫 plugin  并在里面创建kindeditor.js 文件

import KindEditor from '../components/KindEditor'
const install = function (Vue) {
  if (install.installed) return
  install.installed = true
  Vue.component('editor', KindEditor)
}

export default install

五、然后在main.js里引入相关信息

import VueKindEditor from './plugin/kindeditor.js'
	import '../static/kindeditor/themes/default/default.css'
	import '../static/kindeditor/kindeditor-all.js'
	import '../static/kindeditor/lang/zh-CN.js'

六、然后就可以在组件中引入了

解决 kindeditor

一、 在光标位置插入内容

 const str = ``

 // 这里就是插入光标位置了，因为在 KindEditor.vue 已经初始化了editor，所以我们可以直接使用 
    this.$refs.editor.editor.insertHtml(str)

二、在同一个组件下面使用两个富文本，导致其中有一个不生效

 - 在同一个文件，两个id 不能一直 id="editor_id"，
 - 这里的同一个文件夹 包括 在子组件 或 el-dialog组件

三、kindeditor上传到服务器视频文件过大

•    在**application.properties**加入以下配置即可

##视频上传大小
	spring.http.multipart.maxFileSize=50Mb
	spring.http.multipart.maxRequestSize=50Mb

四、kindeditor 自定义上传图片和视频

•  在 公共组件 components 下 kindeditor.vue 文件修改
•  this.$api.file.upload 和 oss.upload 是上传文件后端返回来 url 的方法