javascript - 在 DraftJS 中设置自定义类型

Question

我很好奇我们是否可以定义自己的 block 类型而不是使用来自 DRAFTBLOCKTYPE 的 block 类型.

目前我正在玩 draft-wysiwyg它使用名为 draft-image-plugin 的插件.问题是我必须传递 block-image 作为 block 的类型而不是 atomic 来使插件工作。

实际上，我曾尝试使用来自 this 的解决方案我将插件的类型覆盖为 atomic。但它会影响应用程序上具有 atomic 类型的其他 block ，我无法在其中创建自己的 blockRendererFn，因为 blockRenderer 被该插件的 blockRenderer“吞噬”了。

要将 block 类型设置为atomic，我可以通过以下方式轻松实现:

AtomicBlockUtils.insertAtomicBlock(
  editorState,
  entityKey,
  ' '
)

如何将 block 类型设置为任何自定义类型，例如 block-image 或 block-table？这可能吗？

Answer 1

是的，这是可能的，而且您有几个不同的选择。以下是我所知道的一些:

1. 如果您可以控制呈现 atomic 类型 block 的组件，那么将您的新类型作为实体添加到这些 block 中可能是最简单的。

2. 如果这不是一个选项，它会变得有点麻烦。 AtomicBlockUtils 实际上只是一个模块，旨在帮助人们更轻松地创建媒体(原子) block (尽管将来可能会添加更多实用功能)。如果您想要完全相同的行为，但类型不同，您可以复制 that module只需将 'atomic' 与其他内容(例如 'block-image' 或变量以使其更通用/可重用)交换即可。

   他们使用的技术基本上是创建一个空 block 的选择，然后使用 Modifier.setBlockType()函数给它一个新的 block 类型:

const asAtomicBlock = DraftModifier.setBlockType(
    afterSplit, // ContentState
    insertionTarget, // SelectionState
    'atomic' // your custom type
);

1. 在this example ，作者创建了自己的版本，称为 addNewBlock()(虽然它的工作方式与 AtomicBlockUtils 中的版本不完全相同):

/*
Adds a new block (currently replaces an empty block) at the current cursor position
of the given `newType`.
*/
const addNewBlock = (editorState, newType = Block.UNSTYLED, initialData = {}) => {
  const selectionState = editorState.getSelection();
  if (!selectionState.isCollapsed()) {
    return editorState;
  }
  const contentState = editorState.getCurrentContent();
  const key = selectionState.getStartKey();
  const blockMap = contentState.getBlockMap();
  const currentBlock = getCurrentBlock(editorState);
  if (!currentBlock) {
    return editorState;
  }
  if (currentBlock.getLength() === 0) {
    if (currentBlock.getType() === newType) {
      return editorState;
    }
    const newBlock = currentBlock.merge({
      type: newType,
      data: getDefaultBlockData(newType, initialData),
    });
    const newContentState = contentState.merge({
      blockMap: blockMap.set(key, newBlock),
      selectionAfter: selectionState,
    });
    return EditorState.push(editorState, newContentState, 'change-block-type');
  }
  return editorState;
};

所以如果你想，例如创建一个类型为“block-image”的 block ，带有 src 属性，您可以像这样使用此函数:

const newEditorState = addNewBlock(this.state.editorState, 'block-image', { src: 'https://...' })    
this.setState({ editorState: newEditorState })

更新:如果添加新类型，还需要将其添加到编辑器的 blockRenderMap 中:

import { Map } from 'immutable'

<Editor 
  // editor props
  blockRenderMap={Map({
    ['unstyled']: {
      element: 'div'
    },
    ['block-image']: {
      element: 'div' // or whatever element you want as a wrapper
    },
    // all your other block types
  })}
/>