CKEditor5 + vue3自用记录（查看时只读不可编辑；图片上传，解决通过下载图片接口进行图片回显问题，将文件流转为blob格式显示）

一、CKEditor的使用       

        尝试了很多方法，最后参考了富文本编辑ckeditor5+vue3的使用记录_vue3 ckeditor5 online builder-优快云博客链接里的2.2.1，直接使用构建文件比较方便，别的方法老是有啥报错，但是能查到的资料又特别少。

        在线构建网址：CKEditor 5 Online Builder | Create your own editor in 5 steps

        建议直接把所有有可能用到的功能都构建上，省的后续还要重新选择构建。记得带premium标签的功能是要另外付费的，不然下载完也是用不了的，报错提示缺少证书。

        另外有的功能可能会相互冲突，也会产生报错，需要注意。

        遇到问题还是的得多看官方文档.

1、安装依赖包

npm install --save @ckeditor/ckeditor5-vue

2、新建组件文件夹，放入构建文件

        构建文件build下的这两个文件ckeditor.js 和 ckeditor.js.map放入组件文件中

3、在该文件夹下添加index.js文件，如上图所示

        index.js文件

    import './ckeditor.js'
    export default window['ClassicEditor']

4、全局挂载

import CKEditor from '@ckeditor/ckeditor5-vue';

app.use( CKEditor );

5、创建组件及使用（组件index.vue文件所有代码）

        如上图目录所示，创建了vue文件，作为组件方便复用。

html

<div class="editor-contain">
  <ckeditor 
    :editor="editor" 
    v-model="editorData" 
    :config="editorConfig"
    @input="handleInput"
    @ready="onEditorReady"></ckeditor>
</div>

        将工具栏设置为props参数，方便按需使用。config中的参数均从构建文件src目录下的ckedtor.ts文件中复制。相关API查看官方文档

js全部代码

import { onMounted, ref } from 'vue';
import