最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Quill.js extending BlotParchment changes not captured in delta - Stack Overflow

programmeradmin2浏览0评论

I am getting to grips with quill.js- I would like to be able to create a custom blot with content that is preset, but which I can change.. I have figured out how to create a block embed blot from the medium clone guide, but I have noticed that the created node is not being captured in the delta contents- I have set some text inside a styled div, and I would like to save those changes... I would also like to use this process for things like dynamic captions... it's important that I can save the delta. node.innerText = 'test test test' sets the initial content fine, but changes are not bound to the delta.

Is there some way to either nest blots within blocks? or can I bind the blot content with a delta somehow? any helpful example code would be greatly appreciated. Thank you.

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

and this is my Vue.js method for invoking it:

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

The delta json does not capture the div innerText:

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

* update * don't use quill for block extensions, it doesn't handle them properly--- use Slate.js or Prose Mirror or CkEditor

I am getting to grips with quill.js- I would like to be able to create a custom blot with content that is preset, but which I can change.. I have figured out how to create a block embed blot from the medium clone guide, but I have noticed that the created node is not being captured in the delta contents- I have set some text inside a styled div, and I would like to save those changes... I would also like to use this process for things like dynamic captions... it's important that I can save the delta. node.innerText = 'test test test' sets the initial content fine, but changes are not bound to the delta.

Is there some way to either nest blots within blocks? or can I bind the blot content with a delta somehow? any helpful example code would be greatly appreciated. Thank you.

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

and this is my Vue.js method for invoking it:

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

The delta json does not capture the div innerText:

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

* update * don't use quill for block extensions, it doesn't handle them properly--- use Slate.js or Prose Mirror or CkEditor

Share Improve this question edited Aug 22, 2017 at 14:52 Sean D. asked Apr 20, 2017 at 21:27 Sean D.Sean D. 1812 silver badges7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

I kinda figured this out, I have to extend the value method with the innerText value, but in general I have determined that quill.js is not a great editor-- I feel somewhat misled by the issues with Quill, there are serious architectural mistakes that make it extremely difficult to extend, I'm not sure they will ever be able to resolve them-- they systematically remove references to these issues, they've closed almost 1500 issues but they haven't resolved anything, they also block users who post issues--- Quill does not handle blocks within blocks which makes advanced extensions like tables impossible, the delta format also doesn't handle breaks within blocks properly, so you can't even work around them-- it's kind of a disaster--- I would remend looking at Slate.js or Prose Mirror, they're not as plete but crucially haven't made the same mistakes, they have first class data models...

Here is the code for the fix for quill, but use something else if you can.

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

Whether or not you agree with @SeanD's conclusion (I'm tempted to), you may (like me) be stuck trying to get a custom Blot working.

If you end up here, I'd like to document one related thing I discovered:

...

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

Adding a className to your Blot prevents Quill from assuming all divs should use this Blot. If you don't have a custom class name, pasted content will be all kinds of terrible as Quill tries to force it into this format.

发布评论

评论列表(0)

  1. 暂无评论