3

DRAFTBLOCKTYPEのブロック タイプを使用する代わりに、独自のブロック タイプを定義できるかどうかに興味があります。

現在、draft-image- pluginという名前のプラグインを使用するdraft-wysiwygで遊んでいます。問題は、プラグインを機能させるのではなく、ブロックのタイプとしてを渡さなければならないことです。block-imageatomic

実際、プラグインのタイプをatomic. atomicしかし、blockRenderer がそのプラグインの blockRenderer によって「飲み込まれる」ため、独自の blockRendererFn を作成できないアプリケーションのタイプを持つ他のブロックに影響します。

ブロック タイプを に設定するには、次のatomic方法で簡単に実現できます。

AtomicBlockUtils.insertAtomicBlock(
  editorState,
  entityKey,
  ' '
)

block-imageブロック タイプをやなどのblock-tableカスタム定義タイプに設定する方法 それは可能ですか？

4

1 に答える 1

4

はい、可能です。いくつかのオプションがあります。ここに私が知っているいくつかがあります：

  1. type のブロックをレンダリングするコンポーネントを制御できる場合はatomic、新しいタイプをエンティティとしてそれらのブロックに追加するのがおそらく最も簡単でしょう。

  2. それがオプションでない場合は、もう少し面倒です。AtomicBlockUtils実際には、人々がメディア (アトミック) ブロックをより簡単に作成できるようにするために作られたモジュールにすぎません (ただし、将来さらに多くのユーティリティ関数が追加される可能性があります)。まったく同じ動作が必要であるが、別のタイプが必要な場合は、そのモジュール'atomic'をコピーして、別のもの (たとえば'block-image'、より一般的/再利用可能にする変数)と交換することができます。

    彼らが使用するテクニックは、基本的に空のブロックの選択を作成し、次にModifier.setBlockType()関数を使用して新しいブロック タイプを与えることです。

const asAtomicBlock = DraftModifier.setBlockType(
    afterSplit, // ContentState
    insertionTarget, // SelectionState
    'atomic' // your custom type
);
  1. この例では、作成者は と呼ばれる独自のバージョンを作成しました(ただし、この例と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;
};

たとえば、src 属性を持つ「block-image」タイプのブロックを作成したい場合は、この関数を次のように使用できます。

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
  })}
/>
于 2016-09-02T22:55:02.390 に答える