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

字数 528阅读 1068

最近在用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定义的方法,来解决这个问题。如果有知道怎么调用的,我们一起讨论下。

推荐阅读更多精彩内容