5

我开始掌握 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

4

2 回答 2

8

我有点想通了，我必须用 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
    };
  }
}
于 2017-04-21T18:17:21.587 回答
1

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

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

...

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

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

于 2020-01-09T22:33:28.810 回答