Как переместить курсор в конец строки? - PullRequest
Новая
       19

Как переместить курсор в конец строки?

0 голосов
/ 05 ноября 2019

Я использую draft.js для разработки Rich Text Editor. Я хочу, чтобы пользователь мог продолжать печатать после нажатия кнопки Курсив. И встроенный стиль должен применяться, пока пользователь не отключит курсив. Нажав на кнопку, выведите курсор из редактора. Я создал ссылку и вызвал функцию focus() для текущей ссылки, а затем вызвал moveFocusToEnd on для edotorState. Это не работает, как ожидалось. Как мне добиться этого поведения?

ReactJS 

import React from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { Button, Icon } from 'antd';

function MyEditor() {

  const ref = React.useRef(null);

  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  const handleKeyCommand = command => {
    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      setEditorState(newState)
      return "handled"
    }

    return "not-handled";

  }

  const onItalicClick = event => {
    ref.current.focus()
    EditorState.moveFocusToEnd(editorState)
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'ITALIC'))
  }

  const onUnderLinkClick = event => {
    event.preventDefault()
    setEditorState(RichUtils.toggleInlineStyle(editorState, "UNDERLINE"))
  }

  const onBoldClick = event => {
    event.preventDefault()
    console.log(event)
    setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"))
  }

  return <div>
    <div>
      <Button
        onClick={onItalicClick}
      >
        <Icon type="italic" />
      </Button>
      <Button
        onClick={onUnderLinkClick}
      >
        <Icon type="underline" />
      </Button>
      <Button
        onClick={onBoldClick}
      >
        <Icon type="bold" />
      </Button>
    </div>
    <Editor
      editorState={editorState}
      onChange={editorState => setEditorState(editorState)}
      handleKeyCommand={handleKeyCommand}
      ref={ref}
    />
  </div>;

}

export default MyEditor;

SCSS 

.wrapper {
  border: 1px solid #e2e2e2;
  padding: 10px;
  margin-bottom: 20px;
}

1 Ответ

0 голосов
/ 05 ноября 2019 
selectionState = this.state.editorState.getSelection()    
selectionState=selectionState.merge({'forceKey':xxxx, focusOffset:5})

здесь вы можете установить focusOffset в качестве длины текста этого блока.

...