quill

How do I create a component in Angular 2 that imports the QuillJS module?

别等时光非礼了梦想. 提交于 2020-01-03 15:34:19
问题 I am fairly new to Angular 2 and TypeScript. I am using AngularCLI and NPM to create my Angular Project. I have used NPM to install the quill node module into my project. I am now trying to create a component in which I can customize my quill editor through their API. I am trying to use: import * as Quill from 'quill'; This is returning a 'cannot find quill module' error. I have already added "": "0.0.26", "quill": "^1.0.4", to package.json as dependencies. 回答1: I tried to reproduce your

Having problems extending Quill

可紊 提交于 2020-01-02 04:51:22
问题 I'm hitting some problems extending Quill. I want to modify the List and ListItem classes in Quill, so I tried to copy formats/list.js into my code base as a starting point. I then import my local copy and register it with Quill like so... import { List, ListItem } from './quill/list'; Quill.register({ 'formats/list': List, 'formats/list/item': ListItem }, true); However, when I attempt to create a list in the editor the code crashes in the List class with the following error: ParchmentError

How to add custom font sizes to QuillJS editor

↘锁芯ラ 提交于 2020-01-01 04:52:11
问题 How do you add custom font sizes to the toolbar with QuillJS? I've tried two approaches: // Initiate the editor let toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], [{ 'align': [] }], [{ 'size': ['10px', '20px', '80px'] }], [{ 'color': ['#FFF'] }] ]; this.editor = new Quill('#executive-control-editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); and <div id="toolbar"> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button>

Dynamically change Quill placeholder

瘦欲@ 提交于 2019-12-30 09:38:11
问题 I know that on instantiation of a Quill editor, there is a placeholder option. Is there a way that I can change this placeholder dynamically after the editor is instantiated? 回答1: The placeholder is implemented with a CSS rule: .ql-editor::before { content: attr(data-placeholder); } So you can do quill.root.dataset.placeholder = 'Your new placeholder'; 回答2: If you are using react-quill The placeholder in the tooltip is coming from the value of the data-link attribute. So you can replace the

Dynamically change Quill placeholder

无人久伴 提交于 2019-12-30 09:37:31
问题 I know that on instantiation of a Quill editor, there is a placeholder option. Is there a way that I can change this placeholder dynamically after the editor is instantiated? 回答1: The placeholder is implemented with a CSS rule: .ql-editor::before { content: attr(data-placeholder); } So you can do quill.root.dataset.placeholder = 'Your new placeholder'; 回答2: If you are using react-quill The placeholder in the tooltip is coming from the value of the data-link attribute. So you can replace the

How do I post contents of a Quill editor in a form?

北战南征 提交于 2019-12-30 06:23:20
问题 I have what I think is a very common scenario. I would normally have this form: <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> Then with PHP I would capture the data from the form ($_POST['text']) and I could use that in another variable. Now, I'd like to use Quill so users have a nice rich text editor instead. Quill seems very well suited for this and the documentation is very detailed. However, for some reason I can not find how I can

How do I post contents of a Quill editor in a form?

妖精的绣舞 提交于 2019-12-30 06:23:10
问题 I have what I think is a very common scenario. I would normally have this form: <form method="post"> <textarea name="text"></textarea> <input type="submit" value="Save" /> </form> Then with PHP I would capture the data from the form ($_POST['text']) and I could use that in another variable. Now, I'd like to use Quill so users have a nice rich text editor instead. Quill seems very well suited for this and the documentation is very detailed. However, for some reason I can not find how I can

Quilljs: TypeError when deriving custom Attributor

时光总嘲笑我的痴心妄想 提交于 2019-12-24 17:15:06
问题 I'm trying to implement a potentially overlapping attribute as in this question: Overlapping Inline Annotations with Quill and this issue: https://github.com/quilljs/quill/issues/1216 Only difference is that I'm using TypeScript. This is an excerpt of my code: import Quill from "quill"; import Parchment from "parchment"; class Comment extends Parchment.Attributor.Attribute { constructor(attrName = 'comment', keyName = 'data-comment') { super(attrName, keyName, { scope: Parchment.Scope.INLINE

What, how and when to use static formats, formats and format on custom blot?

人盡茶涼 提交于 2019-12-24 17:14:33
问题 DESCRIPTION I am trying to create an inline blot for text highlighting. I know this feature is already present in quill. But in my implementation I would like to assign a different value to the html element depending on the type of highlighting that was assigned. Here's what I got: let Inline = Quill.import('blots/inline'); class TextHighlight extends Inline { static create(value) { let node = super.create(); if(!value || value < 1) return node; if(value == 5){ node.style.color = 'rgb(225,

Quill js font size issue

ぐ巨炮叔叔 提交于 2019-12-24 14:34:30
问题 I have a proglem with quill.js regarding the font sizes. I have added some font sizes <select title={__("Font size")} className="ql-size"> <option value="8px">8</option> <option value="9px">9</option> <option value="10px">10</option> <option value="11px">11</option> <option value="12px">12</option> <option value="14px" selected>14</option> <option value="18px">18</option> <option value="24px">24</option> <option value="30px">30</option> <option value="36px">36</option> <option value="48px">48