quill

How to add font types on Quill js with toolbar options?

混江龙づ霸主 提交于 2019-11-30 07:12:10
I have made a rich text area made with Quill js . I have the next options for the tool bar: new Quill('#quilljs-container', { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block', 'link'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from

ES6/Babel Class constructor cannot be invoked without 'new'

99封情书 提交于 2019-11-30 05:10:01
问题 I'm trying to create a custom Quill theme, extending the bubble one. I'm facing a strange ES6 inheritance problem, where it seems I cannot call super() in my constructor. Here is my code: import BubbleTheme, { BubbleTooltip } from 'quill/themes/bubble' class LoopTheme extends BubbleTheme { constructor (quill, options) { super(quill, options) } extendToolbar (toolbar) { super.extendToolbar(toolbar) this.tooltip = new LoopTooltip(this.quill, this.options.bounds); this.tooltip.root.appendChild

Creating a custom class attributer in QuillJS

大兔子大兔子 提交于 2019-11-29 15:37:45
问题 I'm trying to create a custom class attributer in QuillJS. I've got this far: let config = { scope: Parchment.Scope.BLOCK, }; let MClass = new Parchment.Attributor.Class('mark', 'dom-mark', config); Quill.register(MClass,true) But when attempting: this.quillEditor.format('mark', 'MarkThisHere'); I get: ERROR TypeError: BlotClass.create is not a function What am i doing wrong? 回答1: Works for me in this example. Parchment = Quill.import('parchment'); let config = { scope: Parchment.Scope.BLOCK,

Overlapping Inline Annotations with Quill

夙愿已清 提交于 2019-11-29 12:48:51
In my application, users can create margin-comments anywhere in the document body, and the comment-anchor ranges can overlap arbitrarily, like this: This [abc]is a set of [xyz]overlapping[/xyz] comments[/abc] I'm defining my comment-anchor blot like this: let Inline = Quill.import('blots/inline'); class CommentAnchorBlot extends Inline { static create(commentId) { let node = super.create(); node.setAttribute("class", "comment-anchor comment-anchor-" + commentId); return node; } static formats(node) { var classNames = node.getAttribute('class').split(/\s+/); for (var i = 0, len = classNames

How to make non selectable embed custom format in quilljs

那年仲夏 提交于 2019-11-29 11:51:10
问题 I would like to create a custom embed format which can be styled but it's text cannot be changed. My use case is pretty similar to the hashtag case. I want to have an external button that will add an hashtag to the current selected range on the editor. But after doing this i want the hashtag to behave as a "block" so that the user cannot go there and change its text. The only way i could accomplish this was by saying that the format's node is contenteditable=false but i'm not sure i'm going

Overlapping Inline Annotations with Quill

六眼飞鱼酱① 提交于 2019-11-28 06:35:33
问题 In my application, users can create margin-comments anywhere in the document body, and the comment-anchor ranges can overlap arbitrarily, like this: This [abc]is a set of [xyz]overlapping[/xyz] comments[/abc] I'm defining my comment-anchor blot like this: let Inline = Quill.import('blots/inline'); class CommentAnchorBlot extends Inline { static create(commentId) { let node = super.create(); node.setAttribute("class", "comment-anchor comment-anchor-" + commentId); return node; } static formats

How to add font types on Quill js with toolbar options?

爱⌒轻易说出口 提交于 2019-11-27 14:05:35
问题 I have made a rich text area made with Quill js. I have the next options for the tool bar: new Quill('#quilljs-container', { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block', 'link'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{ 'direction':