Двухстороннее связывание между значениями текстовой области и CKEditor в React: как заставить его работать как положено? - PullRequest
Новая
       26

Двухстороннее связывание между значениями текстовой области и CKEditor в React: как заставить его работать как положено?

0 голосов
/ 27 марта 2020

Я пытаюсь создать двустороннюю привязку между моим экземпляром ckeditor и простым textrea.

До сих пор я пытался связать значение содержимого ckeditor и значение textarea.

Однако, Я сталкиваюсь с двумя проблемами (они могут быть связаны) в двухсторонней привязке, которую я настроил: 

        <CKEditor
          editor={ ClassicEditor }
          data={this.state.content}
          onInit={ editor => {
              console.log( 'Editor is ready to use!', editor.state );
            }
          }
          onChange={(event, editor) => {
            const data = editor.getData();
            this.editorChangeHandler(data);
          }} />

          <textarea type onChange={
            (event) => {
              console.log(event.target.value);
              // editor.setData(event.target.value); // I think this is what I am missing. New to React. Don't know how to access editor from here. 
              this.editorChangeHandler(event.target.value);
            }
          } value={this.state.content} rows="20">

          </textarea>
  1. Когда я набираю ckeditor и пытаюсь ввести новую строку, новую строку не отображает содержимое \ n в новой строке. Я хотел бы начать новую строку в текстовой области и сделать так, чтобы тег p обернул ее.
  2. Когда я набираю текстовую область, каждая буква помещается внутри тега p. Enter не работает.

Этот ответ

{ ссылка }

делится способом сделать это, но я не смог чтобы понять, как это сделать в реакции.

Вот код, который я получил до сих пор: https://stackblitz.com/edit/react-ck-editor-test-wu17py?file=index.js

...