Ckeditor5 图片媒体库浏览插件

找了一圈，网上的各种资源都是针对图片上传的，没有针对已有的图片进行浏览添加。顾参考插件教程写了一个支持图片浏览的插件。

首先是说明，这个只提供了接口，具体的图片窗口展示样式需要自己做。

源码参考地址： https://gitee.com/yanlong-li/ckeditor5-build-classic/tree/stable/src/plugins/ImageBrowsing

提供两个api：

open 负责点击菜单时，回调自定义函数来开启图片浏览窗口

init 负责在插件初始化时，给一个匿名函数，用于图片浏览后给定一个图片地址进行插入

下面是 插件，放置在 /src/plugins 目录下的，可自定义，imageIcon 也是自定义一个图标

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from './icon.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
// 导出插件   ImageBrowsing  可自定义
export default class ImageBrowsing extends Plugin {
   init() {
     //插件的名字  imageBrowsing  可自定义
      const config = this.editor.config.get('imageBrowsing');

      const editor = this.editor;

      // 调用 init 函数 将 匿名函数传递进去  方便在外围调用
      config.init((imageUrl) => {
         if (!imageUrl) {
            return;
         }
         editor.model.change(writer => {
            const imageElement = writer.createElement('image', {
               src: imageUrl
            });

            // Insert the image in the current selection location.
            editor.model.insertContent(imageElement, editor.model.document.selection);
         });
      })

      editor.ui.componentFactory.add('ImageBrowsing', locale => {
         const view = new ButtonView(locale);

         view.set({
            label: '媒体库',
            icon: imageIcon,
            tooltip: true
         });

         // Callback executed once the image is clicked.
         view.on('execute', () => {
            if (!config.open) {
               return;
            }
            config.open()
         });

         return view;
      });

   }
}

引用时的配置：
imageBrowsing: {
   call: null,
   init: (call) => {
      // 接收一个匿名形参，并保存起来，存在哪里都行;
      this.call = call
      // 当选择图片时调用
      //  call("图片url地址") 
   },
   open: () => {
      console.log('哈哈哈');
   }
},