如何将图像上传到 Editor.js 的 Firebase 存储？答案

【问题标题】：How to upload image to firebase storage for Editor.js?如何将图像上传到 Editor.js 的 Firebase 存储？
【发布时间】：2020-12-16 00:14:17
【问题描述】：

我正在尝试使用后端文件上传器端点在 Editor.js 中添加图像上传功能。在后端，我将此文件上传到 Firebase 存储。但实际上我能够提取文件。我尝试了很多方法，但都没有成功

有没有其他方法可以给editor.js添加图片上传功能。

【问题讨论】：

标签： javascript buffer firebase-storage editorjs

【解决方案1】：

我也在用editorjs，谢谢你的回答。这是我对问题的解决方案：

uploadByFile(file : File) {
            const path = `post/${Date.now()}_${file.name}`;
            const ref = that.afStorage.ref(path);
            const task = that.afStorage.upload(path, file);
            return new Promise((resolve, reject) => {
              task.snapshotChanges()
                .pipe(
                  finalize( () => {
                    ref.getDownloadURL()
                      .subscribe(url => {
                        console.log(url);
                        let res = {
                          success: 1,
                          file: {
                            url : url
                          }
                        }
                        resolve(res);
                      },error => {
                        console.log(error);
                        reject(error);
                      })
                  }))
                .subscribe( url => {
                  if(url){
                    console.log(url);
                  }
                })
            })
          }

【讨论】：

【解决方案2】：

实际上我找到了另一种方法。 Editor.js 提供了一种我们可以在客户端添加UploadByFile 方法的方法。 Firebase 存储在客户端运行良好。这是代码

config: {
    uploader: {
        async uploadByFile(file) {
            var storageRef = storage.ref();
            var imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
            var metadata = {
                contentType: 'image/jpeg'
            };
            var uploadTask = await imagesRef.put(file, metadata);
            console.log("Uploaded successfully!", uploadTask);
            const downloadURL = await uploadTask.ref.getDownloadURL();
            console.log(downloadURL);
            return {
                success: 1,
                file: {
                    url: downloadURL
                }
            }
        }
    }
}

将此配置添加到 editor.js 实现中的图像对象。

【讨论】：

【解决方案3】：

这正是我解决这个问题所需要的，所以谢谢你 Sachin Kumar。这是一个完整的工作示例，但请注意，您需要在 image.css 文件中填写您的 Firebase 设置，否则您将无法连接到 Firebase 存储。我没有以保存内容为例，因为我不想太长，但这应该可以帮助您入门。

我正在测试嵌入，因此我包含了嵌入代码，它允许您复制 youtube 视频 URL 并通过仅包含嵌入 js 和配置来嵌入 youtube 视频。同样没有保存，但非常简单。

test.html:

 <!DOCTYPE html>
<html  >
    <head>
        <!-- Add editorJS via CDN -->
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script> 
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script> 
        
        <!-- Add Firebase via CDN-->
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script> 
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-firestore.js"></script> 
        <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-storage.js"></script> 
    </head>
    <body>
        <h4>EditorJs</h4>
        <div id="editorjs" style="background-color: grey;" ></div>
        <!-- Add the javascript for Image component and Firebase Storage -->
        <script src="image.js"></script> 
    </body>
</html>

这是 image.js 文件（记得更新 firebase 配置）：

    var firebaseConfig = {
/* Enter your firebase Config settings here or this wont work */
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();
const ImageTool = window.ImageTool;

const editor = new EditorJS({
    holder: 'editorjs',
    placeholder: 'Enter Card Content',
    tools: {
        header: {
            class: Header,
            inlineToolbar: ['link']
        },
        list: {
            class: List,
            inlineToolbar: ['link','bold']
        },
        embed: {
            class: Embed,
            inlineToolbar: false,
            config: {
                services: {
                    youtube: true,
                    coub: true
                }
            },
        },
        image: {
            class: ImageTool,
            config: {
                    uploader: {
                        async uploadByFile(file) {
                            let storageRef = firebase.storage().ref();
                            let imagesRef = storageRef.child('EditorJS').child('images/'+ file.name);
                            let metadata = {
                                contentType: 'image/jpeg'
                            };
                            let uploadTask = await imagesRef.put(file, metadata);
                            const downloadURL = await uploadTask.ref.getDownloadURL();
                            return {
                                success: 1,
                                file: {
                                    url: downloadURL
                            }
                        }
                    }
                }
            }               
        }
    }
});

【讨论】：