Quill.js 扩展 Blot / Parchment 更改未在 delta 中捕获答案

【问题标题】：Quill.js extending Blot / Parchment changes not captured in deltaQuill.js 扩展 Blot / Parchment 更改未在 delta 中捕获
【发布时间】：2017-04-20 21:27:39
【问题描述】：

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

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

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

delta json 不捕获 div innerText：

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

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

【问题讨论】：

标签： javascript delta quill parchment

【解决方案1】：

我有点想通了，我必须用 innerText 值扩展 value 方法，但总的来说，我确定 quill.js 不是一个很好的编辑器——我觉得 Quill 的问题有点误导，有严重的架构错误使其极难扩展，我不确定他们是否能够解决它们——他们系统地删除了对这些问题的引用，他们已经关闭了近 1500 个问题，但他们没有解决任何问题，他们还阻止发布问题的用户——Quill 不处理块内的块，这使得表格等高级扩展成为不可能，增量格式也不能正确处理块内的中断，所以你甚至无法解决它们——这很好灾难——我建议看一下 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
    };
  }
}

【讨论】：

【解决方案2】：

无论您是否同意@SeanD 的结论（我很想），您都可能（像我一样）被困在试图让自定义 Blot 工作。

如果你在这里结束，我想记录我发现的一件相关事情：

...

EditModuleBlot.blotName = 'editmodule';
EditModuleBlot.tagName = 'div';
EditModuleBlog.className = 'my-edit-module';

在您的印迹中添加className 可防止 Quill 假定所有 divs 都应使用此印迹。如果你没有自定义类名，粘贴的内容会很糟糕，因为 Quill 会试图将其强制转换为这种格式。

【讨论】：