在vue中使用ckeditor富文本，实现上传本地图片

哦，俺使的是ckeditor4-vue，应该差不多吧，记录一下吧，有同样用这个插件的大佬也可以跟着一起研究一下（废话不多说）

• 下载安装ckeditor4-vue
• npm i ckeditor4-vue@1.0.1或者"ckeditor4-vue": "^1.0.1",将这个代码放到package.json中，然后npm i
• 想要实现本地图片，最重要的就是（反正我这最重要）"ajax-hook": "^2.0.3",安装这个玩意

至于ckeditor的使用

在main.js中：

import CKEditor from 'ckeditor4-vue';

然后就引用就可以直接用了，没有去搞plugins

在需要使用的页面调用

// css：
<ckeditor class="ckeditor" v-model="editortxt" :config='config'></ckeditor>
// editortxt是绑定的，不必解释


// config配置项，具体看官网，展示一下我的吧


data(){
	return{
		editortxt:'',
		api:url,
	 	config: {
	        height: 200,
	        // 富文本功能项
	        extraPlugins: 'colorbutton, colordialog, font, indent, justify, showblocks, image2, uploadimage',
	        // 本地图片上传(ckeditor官网有解释)
	        filebrowserImageUploadUrl: '',
	        filebrowserUploadUrl: ''
      },
	}
}

关键来了

// 先引入proxy
import {proxy, unProxy} from 'ajax-hook'

mounted(){
	unProxy()
    proxy({
      // 请求发起前进入
      onRequest: (config, handler) => {
       // console.log(config)
        handler.next(config)
      },
      // 请求发生错误时进入，比如超时；注意，不包括http状态码错误，如404仍然会认为请求成功
      onError: (err, handler) => {
        handler.next(err)
      },
      // 请求成功后进入
      onResponse: (response, handler) => {
       // console.log(response);
        if (response.config.url === 'http://192.168.2.71:6218/ocean-ranch/rest/files/rich-files') {
          response.response = JSON.parse(response.response)
          
          // console.log('url');
          response.response = JSON.stringify({
            fileName: response.response.result.fileName,
            uploaded: 1,
            // 拼接后台穿给的文件路径，至于文件路径，一会给你们贴图展示一下，baseUrl 就是ip+端口号
            url: baseUrl + response.response.result.filePath
          })
         //**// console.log(response.response,'response.response');
        }
        handler.next(response)
      }
    })
}

要不要解释一下啊，我怕我解释不明白

// 本地图片上传(ckeditor官网有解释) filebrowserImageUploadUrl: '', filebrowserUploadUrl: ''

这两行如果不添加的话，给你们上图看一下吧

没有本地上传的按钮，如果添加这两行的话：

需要先上传图片，然后点击上传服务器，此刻proxy的作用就是拦截你的请求，然后你需要做的就是将后台返回的文件路径拼接成一个完整的url

写一写plugins的方法吧,如果想直接生成plugins文件夹以及文件，直接使用vue add ckeditor4-vue具体使用方法参考百度(其实没啥屁用，就是改变一下目录的结构)

// 在src文件夹下面创建ckeditor.js
// 在ckeditor.js中：
import Vue from 'vue'
import CKEditor from 'ckeditor4-vue/dist/legacy.js'

Vue.use(CKEditor)

然后在main.js中

import './plugins/CKEditor.js'