javascript - DraftJs 创建尽可能简单的自定义 block

Question

在草稿中实现自定义 block 的最简单方法是什么？目前我正在将此函数用于默认 block

  editorToggleBlockType = (blockType) => {
    this.onChange(
      RichUtils.toggleBlockType(
        this.state.editorState,
        blockType
      )
    );
  }

然后我可以使用 blockStyler 应用自定义类

  blockStyler = (block) => {
    if (block.getType() === 'unstyled') {
     return 'paragraph';
    } else {
     return `custom-${block.getType()}`;
    }
  }

遗憾的是，blockType 只接受默认类型，如 blockquote、ol、code-block 等，而自定义类型会给我一个错误。

Uncaught TypeError: Cannot read property 'wrapper' of undefined

我的问题是 - 如何强制编辑器接受自定义 block 类型，以便我可以将 className 应用于它们？谢谢。

Answer 1

您需要在blockRenderMap中定义它。

来自docs :

const blockRenderMap = Immutable.Map({
  'atomic': {
    // the docs use 'MyCustomBlock', but I changed it to 'atomic' to make it easier to follow.
    // element is used during paste or html conversion to auto match your component;
    // it is also retained as part of this.props.children and not stripped out
    element: 'section',
    wrapper: <MyCustomBlock {...this.props} />
  }
});


// Include 'paragraph' as a valid block and updated the unstyled element but
// keep support for other draft default block types
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

class RichEditor extends React.Component {
  render() {
    return (
      <Editor
        ...
        blockRenderMap={extendedBlockRenderMap}
      />
    );
  }
}

令人困惑的是，这一切所做的就是将您的自定义 block 包装在 wrapper 键中指定的任何内容中。然后，实际 block 由 blockRendererFn 渲染，如 docs 中所示。 :

function myBlockRenderer(contentBlock) {
  const type = contentBlock.getType();
  if (type === 'atomic') {
    return {
      component: MediaComponent,
      editable: false,
      props: {
        foo: 'bar',
      },
    };
  }
}

// Then...
import {Editor} from 'draft-js';
class EditorWithMedia extends React.Component {
  ...
  render() {
    return <Editor ... blockRendererFn={myBlockRenderer} />;
  }
}

如果我们逐字遵循此示例，您将得到一个类似于以下内容的 block :

...
<MyCustomBlock>
  <MediaComponent />
</MyCustomBlock>
...

并且您的 blockStyleFn 中的 className 将被传递到 MyCustomBlock，因此您可以将其传递到您喜欢的任何 native DOM 节点。这也是您收到 TypeError 的原因 - DraftJS 无法在 blockRenderMap 中找到您的自定义 block !

我希望这能回答您的问题。 DraftJS 可能会令人困惑，但它是构建 RTE 的一个非常强大的框架。