如何在草稿js中为图像添加标题？

Question

是否可以在 draft js 中渲染输入（用于为图像添加标题）并获取用户输入的数据？我熟悉“自定义块渲染”概念并遵循 https://draftjs.org/docs/advanced-topics-custom-block-render-map/ 提供的说明但是，当我想在输入中写一些东西时，我遇到了以下错误：

invariant.js:40 未捕获的不变违规：未知 DraftEntity 键：null。

事实上，block?.getEntityAt(0) returns null，因为当我开始输入时字符列表发生了变化。

这是自定义块渲染器代码：

import React from "react";
import { fromJS } from "immutable";

export const CustomBlockRenderer = (block, editorState, props) => {
  if (block.getType() === "atomic") {
    return {
      component: Media,
      editable: false,
    };
  }
  return null;
};

const Image = (props) => {
  if (!!props.src) {
    return <img src={props.src} />;
  }
  return null;
};

const Media = (props) => {
  const entity = props.contentState?.getEntity(props?.block?.getEntityAt(0));
  const { src } = entity?.getData();

  const type = entity?.getType();

  let customBlock;

  if (type === "image") {
    customBlock = (
      <figure className="custom-block__image-wrap">
        <Image src={src?.url} className="custom-block__image" />
        <figcaption className="custom-block__caption">{src?.caption}</figcaption>
      </figure>
    );
  } else {
    return null;
  }

  return customBlock;
};

Answer 1

我最近遇到了类似的问题。 Here 其工作原理的简化演示。请注意，draft-js 中的 EditorBlock 组件用于图像标题节点。如果您希望自定义组件内有一个可编辑区域，您应该在自定义组件中使用 EditorBlock。

class MyCustomBlock extends React.Component {
  render() {
    const imgSrc = this.props.block.get("data").src;

    return (
      <div className="my-custom-block">
        <figure className="custom-block__image-wrap">
          <img src={imgSrc} className="custom-block__image" />
          <figcaption className="custom-block__caption">
            <EditorBlock {...this.props} />
          </figcaption>
        </figure>
      </div>
    );
  }
}

如何在草稿js中为图像添加标题？

how to add caption to images in draft js?

javascript

reactjs

draftjs