提问人:harsh 提问时间:10/23/2023 更新时间:10/23/2023 访问量:25
如何在 reactjs 中使用这个隔离块编辑器库从我们的本地库启用图像上传选项
How to Enable Image upload option from our local gallery using this isolated-block-editor library in reactjs
问:
嘿,任何人都可以帮我,我现在应该如何从本地机器库上传图像,我可以通过图像 URL 上传,但我想从图库上传图像,请帮我弄清楚,如果可能的话,请与我分享代码
这是我的代码:
import React from "react";
import IsolatedBlockEditor, { EditorLoaded } from "@automattic/isolated-block-editor";
import reducer from "@wordpress/preferences/build-module/store/reducer";
import * as selectors from "@wordpress/preferences/build-module/store/selectors";
import * as actions from "@wordpress/preferences/build-module/store/actions";
import "./custom.css";
import "@automattic/isolated-block-editor/build-browser/core.css";
import { addFilter } from "@wordpress/hooks";
import { MediaUpload } from "@wordpress/media-utils";
import { mediaUpload } from "@wordpress/editor";
const CustomEditor = () => {
const settings = {
iso: {
moreMenu: false,
customStores: [
{
name: "core/preferences",
config: {
reducer: reducer,
selectors: selectors,
actions: actions,
},
},
],
},
};
settings.editor.mediaUpload = mediaUpload;
if (settings?.editor?.hasUploadPermissions) {
// Connect the media uploader if it's enabled
settings.editor.mediaUpload = mediaUpload;
addFilter(
"editor.MediaUpload",
"blocks-everywhere/media-upload",
() => MediaUpload
);
} else {
settings.editor.mediaUpload = null;
}
return (
<div>
<h1>Editor!</h1>
<IsolatedBlockEditor
style={{ height: "100%" }}
settings={settings}
onLoad={(parser, rawHandler) => {
console.log("parser: ", parser);
console.log("rawHandler: ", rawHandler);
}}
onSaveContent={(content) => {
console.log("onContentSave", content);
}}
onError={() => {
console.log("error");
}}
>
<EditorLoaded onLoaded={(container) => console.log(container)} />
</IsolatedBlockEditor>
</div>
);
};
export default CustomEditor;
我也尝试了这个无处不在的块编辑器,但我无法弄清楚我该怎么做,请帮助我弄清楚,如果有人向我提供示例代码,那么对我来说会很友好......
答: 暂无答案
评论