一键搞定：CKEditor5 集成 Firebase Storage 图片上传

2023-08-01 05:27:59

Vue3 中使用 CKEditor5 和 Firebase Storage 上传图片：分步指南

在当今快节奏的网络世界中，创建引人入胜的网站内容至关重要，而富文本编辑器已经成为实现这一目标的必备工具。CKEditor5 是 Vue3 中一种广受欢迎的富文本编辑器，它提供了强大的功能和简单的集成。通过与Firebase Storage 集成，CKEditor5 赋能开发者轻松上传和管理图片，提升网站内容的视觉吸引力。

1. 安装和配置

第一步是安装 CKEditor5 和 Firebase。使用 npm 命令：

npm install @ckeditor/ckeditor5-build-classic firebase

在 Vue3 项目中，通过 main.js 文件配置 CKEditor5：

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

Vue.use(CKEditor);

同样，配置 Firebase Storage：

import firebase from 'firebase/app';
import 'firebase/storage';

// 替换 YOUR_API_KEY 等值
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
};

firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();

export default storage;

2. 创建 CKEditor5 实例

使用 useRef() 钩子在 Vue3 组件中创建 CKEditor5 实例：

import { CKEditor } from '@ckeditor/ckeditor5-vue';
import { useRef } from 'vue';

export default {
  components: {
    CKEditor,
  },
  setup() {
    const editorRef = useRef();

    return {
      editorRef,
    };
  },
};

3. 集成 Firebase Storage

将 Firebase Storage 集成到 CKEditor5，在 CKEditor5 配置对象中添加：

uploadUrl: '/upload-image',

在 upload-image 路由中处理图片上传：

import storage from '@/firebase.js';

router.post('/upload-image', async (req, res) => {
  const file = req.files.image;
  const path = `images/${file.name}`;

  const snapshot = await storage.ref(path).put(file.data);
  const url = await snapshot.ref.getDownloadURL();

  res.json({ url });
});