2

DraftJS API を使用して次のシナリオを実装するのに問題があります。

シナリオは次のとおりです。これで提供されているリンクの例に従ってください

ユーザーがハイパーリンク URL を確認した後、次のコードを使用して、選択したテキストをハイパーリンクに変換しています。

_confirmLink(urlValue) {
    const {editorState} = this.state;
    const entityKey = Entity.create('LINK', 'MUTABLE', {url: urlValue});

    this.setState({
      showURLInput: false,
      editorState: RichUtils.toggleLink(
        editorState,
        editorState.getSelection(),
        entityKey
      )
    }, () => 
      setTimeout(() => this.refs.editor.focus(), 100);
    });
}

ここで、ユーザーがテキストabcを入力し、プロンプトでその URL を指定したとします。たとえば、http://yahoo.com テキストabcはハイパーリンクに変換されます。

しかし、その後、テキスト エディタのカーソルがすぐに行頭に移動します。ユーザーが手動でそのカーソルを行末に移動して何かを再度入力しようとすると、テキスト エディターは入力したテキストを行頭に表示しますが、これは非常に奇妙です。

私の意見では、ユーザーがその後に何かを入力できるように、生成されたハイパーリンクの後にスペース文字を挿入する必要があります。また、カーソルは行頭ではなく、ハイパーリンクの最後にとどまる必要があります。

どうすればそれを達成できますか？

4

1 に答える 1

1

OK、長い間遊んだ後、答えを見つけました。

基本的に、最初に選択範囲を変換したリンクの最後まで折りたたむ必要があります。次に、Modifier を使用して、その後にスペース文字を挿入しました。

コードは次のとおりです。

_confirmLink(urlValue) {

    const {editorState} = this.state;

    const entityKey = Entity.create(
      'LINK',
      'MUTABLE',
      {url: urlValue}
    );

    let selection = editorState.getSelection();

    const contentState = Modifier.applyEntity(
      editorState.getCurrentContent(),
      selection,
      entityKey
    );

    let linked = EditorState.push(
      editorState,
      contentState,
      'apply-entity'
    );

    let collapsed = selection.merge({
                        anchorOffset: selection.getEndOffset(), 
                        focusOffset: selection.getEndOffset()
                      });

    let newEditorState = EditorState.forceSelection(linked, collapsed);

    this.setState({
      showURLInput: false,
      editorState: newEditorState
    }, () => {
      setTimeout(() => {

        this.refs.editor.focus();

        const {editorState} = this.state;
        let selection = editorState.getSelection();

        let cs = Modifier.insertText(
          editorState.getCurrentContent(),
          selection,
          ' '
        );

        const newEditorState = EditorState.push(
          editorState,
          cs,
          'insert-text'
        );

        this.setState({editorState: newEditorState});
       }, 10);
    });
}
于 2016-11-07T08:24:43.567 に答える