CKeditor的爬坑之旅：vue项目下选择媒体库图片

最近在用vue写项目的管理后台，由于是电商+cms项目，所以我们开发了媒体库来管理所有的素材，但是问题来了，在发布文章的时候，我是用了开源的ckeditor，原来带的选择图片上传插件，只能自定义配置然后重写上传接口。

所以为了做媒体库的图片选择我们需要重新开发一个ckeditor的插件了。

新建一个插件也很简单，官网和网上基本很多的资料。

我新建的这个插件，是为了点击图标的时候，能选择服务器上已经存在的图片文件，

一开始我是这么做的：

我在plugins.js文件的init方法里面增加了click的配置（配置了click，在点击图标的时候，就不会执行默认的command的方法），但是研究了一上午都无法在这个里面获取到当前引入这个ckeditor的vue components的对象，利用Vue.use的话，我这个新手又是在做不来。无奈选择宣告失败了。

然后我换了个思路：

既然官方的的很多的plugins都是通过dialog打开的，那么我也可以在直接利用点击图标弹出dialog然后在dialog里面嵌套媒体库文件列表图片的页面呢，然后当我们选中一个图片，我们就放到localStorage里面，然后我们在ckeditor弹出框的确定按钮回调方法里面，将localStorage里面的图片取出来插入到ckeditor里面。

下面直接上代码了：

1.unfind插件的代码

unfind/plugins.js

unfind/dialog/unfind.js

选择媒体库的vue文件代码

这样就可以解决这个图片选择问题了，不过这样只是一种解决方式，还是像利用在ckeditor的插件js里面调用vue的components定义的方法，来解决这个问题。如果有知道怎么调用的，我们一起讨论下。