admin管理员组文章数量:1326293
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 badges2 Answers
Reset to default 8I 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 div
s 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.
本文标签: javascriptQuilljs extending BlotParchment changes not captured in deltaStack Overflow
版权声明:本文标题:javascript - Quill.js extending BlotParchment changes not captured in delta - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742208747a2433309.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论