Question

我正在处理quill.js-我希望能够创建一个预设内容的自定义印迹，但我可以改变..我已经想出如何创建一个块嵌入印迹中克隆指南，但我注意到创建的节点没有被捕获在delta内容中 - 我在样式div中设置了一些文本，我想保存这些更改...我也想使用这个过程对于像动态字幕这样的东西......我能保存三角洲是非常重要的。 node.innerText =＆＃39;测试测试＆＃39;设置初始内容正常，但更改不会绑定到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

Answer 1

我有点想到这一点，我必须使用innerText值扩展value方法，但总的来说我已经确定quill.js不是一个好的编辑器 - 我觉得有点被Quill的问题误导了，有严重的建筑错误使其难以扩展，我不确定他们是否能够解决这些问题 - 他们系统地删除了对这些问题的引用，他们已经关闭了近1500个问题，但他们已经解决了这些问题。 ; t解决了任何问题，他们还阻止发布问题的用户--- Quill不处理块内的块，这使得像表格这样的高级扩展无法实现，delta格式也不能正确处理块内的中断，所以你可以＆＃39甚至在他们周围工作 - 这是一场灾难 - 我建议你看看Slate.js或散文镜，他们并不完整，但至关重要的是，它们并没有相同错误，他们有一流的数据模型......

以下是针对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
    };
  }
}

Answer 2

无论您是否同意@SeanD的结论（我很想），您（像我一样）都可能被困在试图使自定义污点正常工作的过程中。

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

...

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

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

Quill.js扩展了斑点/羊皮纸的变化，未在delta中捕获

2 个答案: