增量中未捕获的Quill.js扩展斑点/羊皮纸更改

Question

我开始处理quill.js- -我希望能够创建一个带有预设内容的自定义印迹，但是我可以更改它。我已经知道了如何从中间克隆指南创建块嵌入印迹，但是我注意到创建的节点没有被捕获在增量内容中-我已经在一个样式的div中设置了一些文本，我想保存这些更改.我也想用这个过程来处理动态字幕.重要的是我能拯救三角洲。node.innerText =‘测试测试’设置初始内容良好，但更改不绑定到增量。

有什么办法可以在街区内筑巢吗？或者我可以以某种方式将污点内容绑定到增量中吗？任何有帮助的示例代码都将不胜感激。谢谢。

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;"
    }
  }
},

* update *不使用quill作为块扩展，它没有正确地处理它们--使用Slate.js或散文镜像或CkEditor

Answer 1

我有点明白了，我必须用innerText值来扩展价值方法，但总的来说，我认为quill.js不是一个很好的编辑器--我对Quill的问题有一些误解，严重的架构错误使得扩展非常困难，我不确定他们是否能够解决这些问题--他们系统地删除了对这些问题的引用，他们已经关闭了将近1500个问题，但是他们还没有解决任何问题，他们还阻止了发布问题的用户-- Quill不处理块中的块，这使得高级扩展(比如表格)变得不可能，delta格式也不能正确处理块内的中断，所以您甚至无法处理它们--这是一种灾难--我建议您看看Slate.js或properly，它们不完全，但关键是没有犯同样的错误，它们有一流的数据模型……

这是用于羽毛笔修复的代码，但是如果可以的话，可以使用其他的方法。

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

Answer 2

不管你是否同意@SeanD的结论(我很想这么做)，你可能(就像我一样)试图让一个定制的便签工作。

如果你最后来到这里，我想记录一下我发现的一件相关的事情：

...

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

在Blot中添加一个className可以防止Quill假设所有的div都应该使用这个Blot。如果您没有自定义的类名，那么粘贴的内容将是非常糟糕的，因为Quill试图将其强制转换为这种格式。