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

Question

我正在将Quill编辑器与Rails集成起来，并希望用StimulusJS来控制它。本质上，我在Rails表单上有一个字段，其中存储了html，它变成和Quill富文本编辑器。还有另外两个来自Quill的字段使用数据:纯文本(去掉标记)和delta(更改日志)。

然后，通过通常的表单submit将这三个文件保存到数据库中。

它几乎起作用了。

表单和控制器代码

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

问题

当用户键入编辑器字段时，先前保存的数据将作为增量/纯文本复制到textTarget和deltaTarget字段。在下面的图像中，'asdasdasdsa‘的值以前保存在字段中，而用户只是键入'hhh’。

预期行为

在每次击键时，实际的文本将被转换为三角形或文本，并存储在这两个字段中。

任何帮助都会很感激的。*咧嘴笑：

编辑

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

​

​

​

​

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 )不能针对隐藏的字段！