Question

我无法使用DraftJS API实现以下方案。

以下是该方案：遵循this

上提供的链接示例

在用户确认超链接网址后，我使用以下代码将所选文本转换为超链接：

_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，然后他在提示中为其提供了网址，例如http://yahoo.com 文本abc将转换为超链接，非常酷。

但是在文本编辑器中的光标立即滑到行的开头。当用户手动尝试将光标移动到行尾并再次键入内容时，文本编辑器会在行首显示该类型的文本，这很奇怪。

在我看来，应该在生成的超链接之后插入空格字符，以便用户能够在此之后键入内容。此外，光标必须保留在超链接的末尾，而不是在行的开头。

我怎样才能做到这一点？

Answer 1

好的，我玩了很长时间后找到了答案。

首先，我必须将我的选择折叠到转换链接的末尾，然后使用修改器我之后插入一个空格字符。

以下是代码：

_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);
    });
}

如何在DraftJS中添加超链接后的空格字符？

1 个答案: