javascript - Quill.js 扩展未在增量中捕获的 Blot/Parchment 更改

Question

我正在掌握 quill.js - 我希望能够创建一个包含预设内容的自定义印迹，但我可以更改它。我已经想出了如何从中等克隆指南，但我注意到创建的节点未在增量内容中捕获 - 我在样式化的 div 中设置了一些文本，我想保存这些更改......我也想使用这个过程对于动态字幕之类的东西......重要的是我可以保存增量。 node.innerText = 'test test test' 可以很好地设置初始内容，但更改不会绑定(bind)到增量。

有没有办法在 block 中嵌套印迹？或者我能以某种方式将印迹内容与增量绑定(bind)吗？任何有用的示例代码将不胜感激。谢谢。

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style')
    };
  }
}
EditModuleBlot.blotName = 'editmodule';
EditModuleBlot.tagName = 'div';

这是我调用它的 Vue.js 方法:

clickAddModule() {
  let range = this.quillInstance.getSelection(true);
  this.quillInstance.insertText(range.index, '\n', Quill.sources.USER);
  this.quillInstance.insertEmbed(range.index + 1, 'editmodule', {
    style: 'padding:10px;border: 2px dashed black;'
  }, Quill.sources.USER);
  this.quillInstance.setSelection(range.index + 2, Quill.sources.SILENT);
}

增量 json 不捕获 div innerText:

{
  "insert": {
    "editmodule": {
      "style": "padding:10px;border: 2px dashed black;"
    }
  }
},

* 更新 *不要将 quill 用于 block 扩展，它不能正确处理它们---使用 Slate.js 或 Prose Mirror 或 CkEditor

Answer 1

我有点想通了，我必须用 innerText 值扩展值方法，但总的来说我确定 quill.js 不是一个很好的编辑器——我觉得有点被 Quill 的问题误导了，有严重的架构错误使得扩展变得极其困难，我不确定他们是否能够解决它们——他们系统地删除了对这些问题的引用，他们已经关闭了将近 1500 个问题，但他们没有解决任何问题，他们还会阻止发布问题的用户--- Quill 不处理 block 内的 block ，这使得像表这样的高级扩展变得不可能，delta 格式也不能正确处理 block 内的中断，所以你甚至不能解决它们——这很好一场灾难——我建议看看 Slate.js 或 Prose Mirror，它们不那么完整，但关键是没有犯同样的错误，它们有一流的数据模型……

这是修复 quill 的代码，但如果可以，请使用其他代码。

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';

    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style'),
      text: node.innerText //now text will show up in the delta
    };
  }
}