如何在 reactjs 中使用这个隔离块编辑器库从我们的本地库启用图像上传选项

How to Enable Image upload option from our local gallery using this isolated-block-editor library in reactjs

提问人:harsh 提问时间:10/23/2023 更新时间:10/23/2023 访问量:25

问:

嘿,任何人都可以帮我,我现在应该如何从本地机器库上传图像,我可以通过图像 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;

在此处输入图像描述

我也尝试了这个无处不在的块编辑器,但我无法弄清楚我该怎么做,请帮助我弄清楚,如果有人向我提供示例代码,那么对我来说会很友好......

javascript reactjs 文本编辑器 wordpress-古腾堡

评论


答: 暂无答案