Quill: Is there any way to insert <FONT> tag?
I have to reuse HTML generated by legacy client-side editor, but it seems ng-quill-editor does not accept the tag on its ng-model and uses its inner text, instead.
Is there a way to bypass this limitation?
Steps for Reproduction
- Visit quilljs.com
- Select the HTML tab
- Change the contents of "div#editor-container" as the following
<div id="editor-container">
<p>--- begin ---</p>
<p><font color="red">this should be red</font></p>
<p>--- end ---</p>
</div>
Expected behavior:
I expected the text on the second paragraph to be red.
Actual behavior:
The text on the second paragraph was on default color.
Platforms:
Google Chrome (Version 58.0.3029.110 (64-bit)), but I believe it doesn't
Version:
1.2.4
gerardolima
All 4 comments
gerardolima
on 8 Jun 2017
Quill only accepts a subset of HTML in order to keep its content predictable and consistent. You can add a definition for <font> using Parchment. More details and examples on how to use Parchment is forthcoming so stay tuned and check back to https://quilljs.com then.
jhchen
on 17 Jul 2017
Hi, @jhchen, I have some legacy HTML content I have to render -- that contains the tags <font> and <table>, i.e. -- but I'm not sure on where to find the documentation I need to do it. Could you, please, provide more information on this matter?
gerardolima
on 18 Jul 2017
I don't know how the code I wrote exactly works but it does.
````
let Inline = Quill.import('blots/inline');
// Add fonts to whitelist
var Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist = ['Tahoma', 'Impact','Verdana','Times New Roman','Courier New','Helvetica Neue'];
Quill.register(Font, true);
class FontBlot extends Inline {
static create(value) {
let node = super.create();
node.setAttribute('face', value.fontFamily);
node.setAttribute('size', value.size);
return node;
}
static formats(node) {
return {
size: node.getAttribute('size'),
fontFamily: node.getAttribute('face')
};
}
}
FontBlot.blotName = 'font';
FontBlot.tagName = 'font';
Quill.register(FontBlot);
return new Quill(target, {
````
gxkshitij
on 4 Oct 2017
Related issues
markstewie
路
3Comments
emanuelbsilva
路
3Comments
aletorrado
路
3Comments
sferoze
路
3Comments
benbro
路
3Comments
Most helpful comment
I don't know how the code I wrote exactly works but it does.
````
let Inline = Quill.import('blots/inline');
// Add fonts to whitelist
var Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist = ['Tahoma', 'Impact','Verdana','Times New Roman','Courier New','Helvetica Neue'];
Quill.register(Font, true);
class FontBlot extends Inline {
static create(value) {
let node = super.create();
node.setAttribute('face', value.fontFamily);
node.setAttribute('size', value.size);
return node;
}
}
FontBlot.blotName = 'font';
FontBlot.tagName = 'font';
Quill.register(FontBlot);
return new Quill(target, {
````