我正试图通过使用后端文件上传器端点在Editor.js中添加图像上传功能。在后台，我将这个文件上传到firebase存储。但实际上我可以提取文件。我尝试了很多方法，但都不起作用
有没有其他方法可以将图像上传功能添加到editor.js。
我也在使用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);
}
})
})
}
实际上我找到了另一种方法。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实现中的图像对象中。
这正是我解决这个问题所需要的，所以感谢Sachin Kumar。这是一个完整的工作示例，但请注意，您需要在image.css文件中填写Firebase设置，否则将无法连接到Firebase存储。我没有以保存内容为例，因为我不想太长时间，但这应该会让你开始。
我正在测试嵌入，所以我包含了嵌入的代码，这将允许你复制一个youtube视频URL，并通过包含嵌入的js和配置来嵌入一个youttube视频。再次，还没有保存，但相当简单。
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
}
}
}
}
}
}
}
});