我正在掌握quill.js-我希望能够创建一个预设内容的自定义印迹,但我可以改变..我已经想出如何从中等克隆指南创建一个块嵌入印迹,但我注意到创建的节点没有被捕获在delta内容中 – 我在样式div中设置了一些文本,我想保存这些更改…我也想用这个过程来做像动态字幕……重要的是我能保存三角洲.
 node.innerText =’test test test’设置初始内容正常,但更改不绑定到delta.

有没有办法在块内嵌套印迹？或者我可以用某种方式将斑点内容与三角形结合起来吗？任何有用的示例代码将不胜感激.谢谢.

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

解决方法:

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