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

Question

我正在将 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>

刺激控制器

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 / 纯文本复制到 textTarget 和 deltaTarget 字段。在下图中，'asdasdasdsa' 的值先前已保存到该字段中，而用户只是键入了 'hhh'。

预期行为

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

任何帮助将不胜感激。:咧嘴笑:

编辑

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

StimulusJS的display-none类和label: false需要的地方不能针对隐藏字段！！！