Блог

Главная - Вопросы по программированию - Реагировать на автоматический переход курсора DraftJS к началу после ввода существующего содержимого и начала ввода в обратном порядке?

Реагировать на автоматический переход курсора DraftJS к началу после ввода существующего содержимого и начала ввода в обратном порядке?

#javascript #reactjs #draftjs #react-draft-wysiwyg

Вопрос:

Я использую DraftJS для редактирования текстового содержимого, но когда я попытался отредактировать любое существующее содержимое, которое я извлек из базы данных и загрузил в редактор, курсор автоматически переместился в начало текста, и я начал печатать задом наперед.

Я импортировал Editor в Bulletin.js , поэтому я должен получить содержимое, передав getContent в Editor и получить обратно необработанный html, используя getContent в handleEditorChange функции Editor .

Я обнаружил , что если я удалил getContent функцию для передачи исходного HTML handleEditorChange -кода, редактор будет работать нормально, но тогда я не смогу вернуть html-содержимое обратно Bulletin.js .

Вот кодовое поле, которое я создал для справки.

Ответ №1:

Проблема в том, что вы ставите на каждое изменение новое EditorState здесь:

 useEffect(() => {
  if (htmlContent) {
    let convertedToHTML = decodeURIComponent(htmlContent);
    const blocksFromHtml = htmlToDraft(convertedToHTML);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(
      contentBlocks,
      entityMap
    );
    setEditorState(EditorState.createWithContent(contentState));
  }
}, [htmlContent]);

htmlContent всегда меняется при преобразовании EditorState в HTML при каждом изменении с помощью getContent функции.

Если вы хотите инициализировать свой EditorState с htmlContent помощью, вы можете сделать это в useState функции и удалить useEffect :

 const [editorState, setEditorState] = useState(() => {
  if (htmlContent) {
    let convertedToHTML = decodeURIComponent(htmlContent);
    const blocksFromHtml = htmlToDraft(convertedToHTML);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(
      contentBlocks,
      entityMap
    );
    return EditorState.createWithContent(contentState);
  }
  return EditorState.createEmpty()
});

Комментарии:

1. Как я должен изменить способ работы getContent, чтобы он не конвертировал EditorState его в HTML при каждом изменении? Не совсем уверен, правильно ли я это понял.

2. getContent Проблема не в методе, а в том, setEditorState в useEffect чем дело. Просто сделайте это один раз при создании компонента, а не при каждом изменении

3. Если я правильно понял, мне просто нужно удалить [htmlContent] зависимость от эффекта использования, верно?

4. Я отредактировал свой ответ и надеюсь, что теперь он более ясен.

5. Теперь я понимаю, что ты имел в виду, спасибо. Я попробовал ваш метод и реализовал его в предоставленном мной codesandbox, но теперь редактор по какой-то причине не загружается с html-контентом, который я ему передаю (<p>Hello world</p>) .

Метки: