Устаревайте данные с помощью StimulusJS и редактора Quill - PullRequest
Новая
       45

Устаревайте данные с помощью StimulusJS и редактора Quill

0 голосов
/ 01 июня 2018

Я интегрирую редактор Quill с Rails и хотел бы управлять им с помощью StimulusJS .По сути, у меня есть поле в форме Rails, в котором хранится html, и он становится редактором форматированного текста Quill.Есть также 2 других поля, потребляющих данные из Quill: простой текст (без тегов) и дельты (журнал изменений).

Все три затем сохраняются в БД с помощью обычной формы отправки.

Это почти работает.

Форма и код контроллера 

<div data-controller='quill'>
      <%= f.input :target_note,
            input_html: {
              data: {
                target: 'quill.editor',
                action: "keyup->quill#update" } } %>
      <input data-target='quill.delta'/>
      <input data-target='quill.text' />
    </div>

Контроллер Stimulus 

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ['editor','delta','text'];

  connect() {
    console.log('connected');
    this.quill = new Quill('#grammar_note_target_note', {
      theme: 'snow'
    });
  }

  update(){
    console.log(this.quill.getContents());
    console.log(this.quill.getText());
    this.textTarget.value = this.quill.getText();
    this.deltaTarget.value = this.quill.getContents();
  }
}

Задача

Когда пользователь вводит данные в поле редактора, ранее сохраненные данные копируются в виде дельта / простого текста в поля textTarget и deltaTarget.На изображении ниже значение «asdasdasdsa» ранее было сохранено в поле, а пользователь просто набрал «hhh».

Ожидаемое поведение

При каждом нажатии клавишифактический текст будет преобразован в дельты или текст и сохранен в 2 полях.

Любая помощь будет принята с благодарностью.: grin:

Редактировать

@ jhchen каждое нажатие клавиши выдает те же оригинальные данные, которые были в поле.Изменения отражаются на экране, но не на 2 входах или консоли.

enter image description here

enter image description here

1 Ответ

0 голосов
/ 02 июня 2018

Ну, у меня все работает, но я не продан на 100% на StimulusJS.Возможно, есть лучший способ сделать это, но это мое решение:

javascript 

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ['editor','html','text'];

  initialize() {
    this.quill = new Quill(this.editorTarget, {
      theme: 'snow'
    });
    this.quill.on("text-change", e => {
      this.textChange();
    });
 }

 textChange(){
    this.htmlTarget.value = this.quill.root.innerHTML;
    this.textTarget.value = this.quill.getText();
 }

}

view 

<div data-controller='quill'>
    <div data-target='quill.editor'>
      <% if f.object.target_note.present? %>
        <%= f.object.target_note.html_safe %>
      <% end %>
    </div>
    <%= f.input :target_note,
          label: false,
          input_html: {
            class: 'display-none',
            data: { target: 'quill.html' } } %>
    <%= f.input :target_note_text,
          label: false,
          input_html: {
            class: 'display-none',
            data: { target: 'quill.text' }
          } %>
  </div>

Класс display-none и label: false, где это необходимо, так как StimulusJS не может нацелиться на скрытое поле !!!

...