Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ngx-quill
Advanced tools
ngx-quill is an Angular component for the Quill rich text editor. It provides a simple way to integrate Quill into Angular applications, allowing for rich text editing capabilities with a variety of customization options.
Basic Integration
This code demonstrates how to integrate the Quill editor into an Angular component using ngx-quill. The editor's content is bound to the `editorContent` variable using Angular's two-way data binding.
<quill-editor [(ngModel)]="editorContent"></quill-editor>
Custom Toolbar
This code shows how to customize the toolbar of the Quill editor. The toolbar is configured to include buttons for bold, italic, and list formatting options.
<quill-editor [modules]="{ toolbar: [['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]] }"></quill-editor>
Form Integration
This example demonstrates how to integrate the Quill editor with Angular forms. The editor is bound to a form control named `editor` within a reactive form.
<form [formGroup]="form"><quill-editor formControlName="editor"></quill-editor></form>
Content Formatting
This code shows how to apply custom styles and enable syntax highlighting in the Quill editor. The editor's height is set to 200 pixels, and syntax highlighting is enabled.
<quill-editor [styles]="{ height: '200px' }" [modules]="{ syntax: true }"></quill-editor>
ngx-editor is another Angular rich text editor that provides similar functionalities to ngx-quill. It offers a simple API for integrating a rich text editor into Angular applications, with support for custom toolbars and form integration. Compared to ngx-quill, ngx-editor is more lightweight but may have fewer customization options.
angular-editor is a lightweight Angular WYSIWYG editor that provides basic rich text editing capabilities. It is easy to integrate and use, making it a good choice for simple use cases. However, it may lack some of the advanced features and customization options available in ngx-quill.
ng2-quill-editor is another Angular wrapper for the Quill editor. It offers similar functionalities to ngx-quill, including support for custom toolbars and form integration. The main difference is in the implementation and API design, which may vary slightly between the two packages.
ngx-quill is an angular (>=2) module for the Quill Rich Text Editor containing all components you need.
If you like my work, feel free to support it. Donations to the project are always welcomed :)
PayPal: PayPal.Me/bengtler
quill-view
and quill-view-html
componentAngular | ngx-quill | supported |
---|---|---|
v17 | >= 24.0.0 | until May, 2025 |
v16 | >= 22.0.0 < 24.0.0 | until Dec, 2024 |
v15 | >= 20.0.0 < 22.0.0 | until May, 2024 |
npm install ngx-quill
npm install ngx-quill@1.6.0
@angular/core
, @angular/common
, @angular/forms
, @angular/platform-browser
, quill
v1.x, @types/quill
v1.x and rxjs
- peer dependencies of ngx-quillnode_modules/quill/dist
), or add them in your css/scss files with @import
statements, or add them external stylings in your build process.
@import '~quill/dist/quill.bubble.css';
// or
@import '~quill/dist/quill.snow.css';
QuillModule
from ngx-quill
:import { QuillModule } from 'ngx-quill'
QuillModule
to the imports of your NgModule:@NgModule({
imports: [
...,
QuillModule.forRoot()
],
...
})
class YourModule { ... }
<quill-editor></quill-editor>
in your templates to add a default quill editorHINT: If you are using lazy loading modules, you have to add QuillModule.forRoot()
to your imports in your root module to make sure the Config
services is registered.
Nothing to do here :)
It's possible to set custom default modules and Quill config options with the import of the QuillConfigModule
from the ngx-quill/config
. This module provides a global config, but eliminates the need to import the ngx-quill
library into the vendor bundle:
import { QuillConfigModule } from 'ngx-quill/config';
@NgModule({
imports: [
...,
QuillConfigModule.forRoot({
modules: {
syntax: true,
toolbar: [...]
}
})
],
...
})
class AppModule {}
Registering the global configuration can be also done using the standalone function if you are bootstrapping an Angular application using standalone features:
import { provideQuillConfig } from 'ngx-quill/config';
bootstrapApplication(AppComponent, {
providers: [
provideQuillConfig({
modules: {
syntax: true,
toolbar: [...]
}
})
]
})
If you want to use the syntax
module follow the Syntax Highlight Module Guide.
See Quill Configuration for a full list of config options.
The QuillModule
exports the defaultModules
if you want to extend them :).
Per default when Quill.register
is called and you are overwriting an already existing module, QuillJS logs a warning. If you pass customOptions
or customModules
ngx-quill is registering those modules/options/formats for you.
In e.g. an angular univeral project your AppModule
and so QuillModule.forRoot()
is executed twice (1x server side, 1x browser). QuillJS is running in a mocked env on server side, so it is intendet that every register runs twice.
To subpress those expected warnings you can turn them off by passing suppressGlobalRegisterWarning: true
.
Ngx-quill updates the ngModel or formControl for every user
change in the editor.
Checkout the QuillJS Source parameter of the text-change
event.
If you are using the editor reference to directly manipulate the editor content and want to update the model, pass 'user'
as the source parameter to the QuillJS api methods.
html
, values: html | object | text | json
, sets the model value type - html = html string, object = quill operation object, json = quill operation json, text = plain textconst modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ '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
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
['link', 'image', 'video'] // link and image, video
]
};
snow
false
, boolean (only for format="html")[styles]="{height: '250px'}"
Insert text here ...
document.body
, pass 'self' to attach the editor elementinvalid
and add ng-invalid
classinvalid
and add ng-invalid
class, only set invalid if editor text not empty --> if you want to check if text is required --> use the required attributefalse
[required]="true"
- default: false, boolean expected (no strings!)// typings.d.ts
declare module '!!raw-loader!*.css' {
const css: string;
export default css;
}
// my.component.ts
const quillCSS$ = defer(() =>
import('!!raw-loader!quill/dist/quill.core.css').then((m) => {
const style = document.createElement('style');
style.innerHTML = m.default;
document.head.appendChild(style);
})
).pipe(shareReplay({ bufferSize: 1, refCount: true }));
@Component({
template: '<quill-editor [beforeRender]="beforeRender"></quill-editor>',
})
export class MyComponent {
beforeRender = () => firstValueFrom(quillCSS$);
}
{ import: string; whitelist: any[] }
--> this overwrites this options globally !!!// Example with registering custom fonts
customOptions: [{
import: 'formats/font',
whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
}]
{ implementation: any; path: string }
--> this overwrites this modules globally !!!// The `implementation` may be a custom module constructor or an Observable that resolves to
// a custom module constructor (in case you'd want to load your custom module lazily).
// For instance, these options are applicable:
// import BlotFormatter from 'quill-blot-formatter';
customModules = [
{ path: 'modules/blotFormatter', implementation: BlotFormatter }
]
// Or:
const BlotFormatter$ = defer(() => import('quill-blot-formatter').then(m => m.default))
customModules = [
{ path: 'modules/blotFormatter', implementation: BlotFormatter$ }
]
customOptions
and customModules
Demo Repo[quill-editor-toolbar]
and add content above [above-quill-editor-toolbar]
and below [below-quill-editor-toolbar]
the toolbar:Try to not use much angular magic here, like (output)
listeners. Use native EventListeners
<quill-editor>
<div above-quill-editor-toolbar>
above
</div>
<div quill-editor-toolbar>
<span class="ql-formats">
<button class="ql-bold" [title]="'Bold'"></button>
</span>
<span class="ql-formats">
<select class="ql-align" [title]="'Aligment'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<select class="ql-align" [title]="'Aligment2'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
</div>
<div below-quill-editor-toolbar>
below
</div>
</quill-editor>
top
, possible values top
, bottom
warn
, error
, log
or false
to deactivate logging, default: warn
user
(quill source user) or all
content/selection changes should be trigger model update, default user
. Using all
is not recommended, it cause some unexpected sideeffects.onContentChanged
, onEditorChanged
, ngModel
and form control value changes. Improves performance (especially when working with large, >2-3 MiB Deltas), as neither editorChangeHandler
, nor textChangeHandler
handler runs internally.null
, but you can set it e.g. to empty stringeditor // Quill
{
editor: editorInstance, // Quill
html: html, // html string
text: text, // plain text string
content: content, // Content - operatins representation
delta: delta, // Delta
oldDelta: oldDelta, // Delta
source: source // ('user', 'api', 'silent' , undefined)
}
{
editor: editorInstance, // Quill
range: range, // Range
oldRange: oldRange, // Range
source: source // ('user', 'api', 'silent' , undefined)
}
{
editor: editorInstance, // Quill
event: 'text-change' // event type
html: html, // html string
text: text, // plain text string
content: content, // Content - operatins representation
delta: delta, // Delta
oldDelta: oldDelta, // Delta
source: source // ('user', 'api', 'silent' , undefined)
}
or
{
editor: editorInstance, // Quill
event: 'selection-change' // event type
range: range, // Range
oldRange: oldRange, // Range
source: source // ('user', 'api', 'silent' , undefined)
}
{
editor: editorInstance, // Quill
source: source // ('user', 'api', 'silent' , undefined)
}
{
editor: editorInstance, // Quill
source: source // ('user', 'api', 'silent' , undefined)
}
{
editor: editorInstance, // Quill
source: source // ('dom')
}
{
editor: editorInstance, // Quill
source: source // ('dom')
}
In most cases a wysiwyg editor is used in backoffice to store the content to the database. On the other side this value should be used, to show the content to the enduser.
In most cases the html
format is used, but it is not recommended by QuillJS, because it has the intention to be a solid, easy to maintain editor. Because of that it uses blots and object representations of the content and operation.
This content object is easy to store and to maintain, because there is no html syntax parsing necessary. So you even switching to another editor is very easy when you can work with that.
ngx-quill
provides some helper components, to present quilljs content.
In general QuillJS recommends to use a QuillJS instance to present your content. Just create a quill editor without a toolbar and in readonly mode. With some simple css lines you can remove the default border around the content.
As a helper ngx-quill
provides a component where you can pass many options of the quill-editor
like modules, format, formats, customOptions, but renders only the content as readonly and without a toolbar. Import is the content
input, where you can pass the editor content you want to present.
html
, values: html | object | text | json
, sets the model value type - html = html string, object = quill operation object, json = quill operation json, text = plain textsnow
warn
, error
, log
or false
to deactivate logging, default: warn
false
, boolean (only for format="html")<quill-view [content]="content" format="text" theme="snow"></quill-view>
Most of you will use the html
format (even it is not recommended). To render custom html with angular you should use the [innerHTML]
attribute.
But there are some pitfalls:
div
-tag that has the innerHTML
attribute and add the ql-editor
class. Wrap your div in another div
-tag with css classes ql-container
and your theme, e.g. ql-snow
.:<div class="ql-container ql-snow" style="border-width: 0;">
<div class="ql-editor" [innerHTML]="byPassedHTMLString">
</div>
</div>
After that your content should look like what you expected.
If you store html in your database, checkout your backend code, sometimes backends are stripping unwanted tags as well ;).
As a helper ngx-quill
provides a component where you can simply pass your html string and the component does everything for you to render it:
<quill-view-html [content]="htmlstring" theme="snow"></quill-view-html>
snow
false
, boolean (uses DomSanitizer to bypass angular html sanitation when set to false)Angular templates provide some assurance against XSS in the form of client side sanitizing of all inputs https://angular.io/guide/security#xss.
Ngx-quill components provide the input paramter sanitize
to sanitize html-strings passed as ngModel
or formControl
to the component.
It is deactivated per default to avoid stripping content or styling, which is not expected.
But it is recommended to activate this option, if you are working with html strings as model values.
FAQs
Angular components for the easy use of the QuillJS richt text editor.
The npm package ngx-quill receives a total of 175,175 weekly downloads. As such, ngx-quill popularity was classified as popular.
We found that ngx-quill demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.