使用StimulusJS和Quill编辑器的陈旧数据

Question

我正在将Quill编辑器与Rails集成，并希望用recently added (in v0.55.4)来控制它。基本上我在Rails表单上有一个字段，其中存储了html，它变成了Quill富文本编辑器。 Quill还有另外2个字段消耗数据：纯文本（剥离标记）和增量（更改日志）。

然后通过通常的表格提交将所有三个保存到数据库。

几乎正在工作。

表单和控制器代码

<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>

刺激控制器

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

问题

当用户键入编辑器字段时，先前保存的数据将作为delta / plain文本复制到textTarget和deltaTarget字段。在下图中，＆＃39; asdasdasdsa＆＃39;之前已保存到该字段中，而用户只需输入“hhh＆＃39;。

预期行为

在每次击键时，实际文本将转换为增量或文本并存储在2个字段中。

真的很感激任何帮助。 ：微笑：

修改

@jhchen每次击键都会生成相同的原始数据。更改将反映在屏幕上，但不会反映在2个输入或控制台中。

StimulusJS

Answer 1

嗯，我把它全部搞定了，但是并没有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();
 }

}

查看

<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无法定位隐藏的字段!!!