5
私はdraftjsには新しく、カスタム・コンポーネントをエディタでインラインでレンダリングする方法があるかどうかは疑問でした。小道具を備えたドラフト・コンポーネント
私はtwitterハンドル付きの文字列を持っています。私はデコレータを使用してハンドルを置き換え、コンポーネントをインラインでレンダリングする正規表現@ [{handle}]を検出します。しかし、私のハンドルコンポーネントには、コールバック関数やURLなどのプロパティが必要です。
ContentEditableコンポーネントに渡すURLとコールバック関数をコンポーネントに渡す方法があまりにもわかりません。
私は何かが欠けていると確信しています。私はcontentState.getEntity(entityKey).getType()をチェックしましたが、コンポジットデコレータに渡すコンテンツは、アンスタイリングされたものとして表示され、別のブロックとしてデコレートされたものではありません。
私はあなたがエンティティー・マップを変更することができることを見てきましたが、私は、これは正しいアプローチであるか、どのようにエンティティー・マップ
に私自身のエンティティを定義するには、誰もが私が行方不明です何を知っていますかどうかわからないんだけど私のコンポーネントにプロパティを与える？
const decorator = new CompositeDecorator([
{
strategy: handleStrategy,
component: Handle,
},
]);
export default class ContentEditable extends component {
const content = 'some messages and my handle @[handle]';
if (this.props.content.trim() !== '') {
const processedHTML = DraftPasteProcessor.processHTML(content);
const entityMap = processedHTML.entityMap;
const contentState = ContentState.createFromBlockArray(processedHTML.contentBlocks, entityMap);
// Create with content with decorator
editorState = EditorState.createWithContent(contentState, decorator);
} else {
// Create empty content with decorator
editorState = EditorState.createEmpty(decorator);
}
this.state = {
editorState,
}
}
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
ref="editor"
/>
);
}