Draft.js - リンクを追加

Question

リンクを追加するには？私は選択

  const contentState = editorState.getCurrentContent(); 
      const contentStateWithEntity = contentState.createEntity(
      'LINK', 
      'MUTABLE', 
      {url: urlValue} 
     ); 
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); 
      const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity }); 
      this.setState({ 
      editorState: RichUtils.toggleLink(
       newEditorState, 
       newEditorState.getSelection(), 
       entityKey 
      )} 

我々が得る選択newEditorState.getSelection()へのリンクを追加し、リンクを追加する方法を知っています。

しかし、選択なしでリンクを追加する方法はありますか？テキストが選択されていない場合は、新しいaタグをテキストに追加するだけですか？テキストを選択しないと、何も追加されません。

Answer 1

コンポーネントを更新せずにエディタの状態で操作できます。したがって、必要なテキストを追加してから、プログラムでこのテキストの選択を設定し、最後にリンクを作成してコンポーネントを更新することができます。

この実例を見て​​ください - https://jsfiddle.net/levsha/2op5cyxm/ ここでは、ボタンをクリックした後にリンクを追加します。

handleAddLink =() => { 
    const { editorState } = this.state; 
    const selectionState = editorState.getSelection(); 
    const contentState = editorState.getCurrentContent(); 
    const currentBlock = contentState.getBlockForKey(selectionState.getStartKey()); 
    const currentBlockKey = currentBlock.getKey(); 
    const blockMap = contentState.getBlockMap(); 
    const blocksBefore = blockMap.toSeq().takeUntil((v) => (v === currentBlock)); 
    const blocksAfter = blockMap.toSeq().skipUntil((v) => (v === currentBlock)).rest(); 
    const newBlockKey = genKey(); 

    // add new ContentBlock to editor state with appropriate text 

    const newBlock = new ContentBlock({ 
    key: newBlockKey, 
    type: 'unstyled', 
    text: linkText, 
    characterList: new List(Repeat(CharacterMetadata.create(), linkText.length)), 
    }); 

    const newBlockMap = blocksBefore.concat(
    [[currentBlockKey, currentBlock], [newBlockKey, newBlock]], 
    blocksAfter 
).toOrderedMap(); 

    const selection = editorState.getSelection(); 

    const newContent = contentState.merge({ 
    blockMap: newBlockMap, 
    selectionBefore: selection, 
    selectionAfter: selection.merge({ 
     anchorKey: newBlockKey, 
     anchorOffset: 0, 
     focusKey: newBlockKey, 
     focusOffset: 0, 
     isBackward: false, 
    }), 
    }); 

    let newEditorState = EditorState.push(editorState, newContent, 'split-block'); 

    // programmatically apply selection on this text 

    const newSelection = new SelectionState({ 
    anchorKey: newBlockKey, 
    anchorOffset: 0, 
    focusKey: newBlockKey, 
    focusOffset: linkText.length 
    }); 

    newEditorState = EditorState.forceSelection(newEditorState, newSelection); 

    // create link entity 

    const newContentState = newEditorState.getCurrentContent(); 

    const contentStateWithEntity = newContentState.createEntity(
    'LINK', 
    'IMMUTABLE', 
    { url: linkUrl } 
); 

    const entityKey = contentStateWithEntity.getLastCreatedEntityKey(); 
    newEditorState = EditorState.set(newEditorState, { currentContent: contentStateWithEntity }); 

    newEditorState = RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey); 

    // reset selection 

    newSelection = new SelectionState({ 
    anchorKey: newBlockKey, 
    anchorOffset: linkText.length, 
    focusKey: newBlockKey, 
    focusOffset: linkText.length 
    }); 

    newEditorState = EditorState.forceSelection(newEditorState, newSelection); 

    // update our component 

    this._handleChange(newEditorState); 
}