Angular component for the Quill Rich Text Editor
npm install ng-quill
3QVyr2tpRLBCw1kBQ59sTDraV6DTswq8Li
0x394d44f3b6e3a4f7b4d44991e7654b0cab4af68f
MFif769WSZ1g7ReAzzDE7TJVqtkFpmoTyT
rXieaAC3nevTKgVu2SYoShjTCS2Tfczqx?dt=159046833
npm install ng-quill
npm install angular angular-sanitize quill
var myAppModule = angular.module('quillTest', ['ngQuill']);
[ng-quill-editor] { display: block; }
ng-quill-toolbar - it uses transclusion to add toolbar, avoids flickering and sets the modules toolbar config to the custom toolbar automatically:
`
- customToolbarPosition - if you are working with a custom toolbar you can switch the position :). - default: top, possible values top, bottom
Full Quill Toolbar HTML
Alternative Usage
--
`
let app = angular.module('app', [ 'ngQuill' ])
app.constant('NG_QUILL_CONFIG', {
/*
* @NOTE: this config/output is not localizable.
*/
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
]
},
theme: 'snow',
debug: 'warn',
placeholder: '',
readOnly: false,
bounds: document.body,
scrollContainer: null
})
app.config([
'ngQuillConfigProvider',
'NG_QUILL_CONFIG',
function (ngQuillConfigProvider, NG_QUILL_CONFIG) {
ngQuillConfigProvider.set(NG_QUILL_CONFIG)
}
])
`
\*see: ./src/ng-quill/app.provider('ngQuillConfig').config
Configuration
- use ngQuillConfigProvider.set({modules: { ... }, theme: 'snow', placeholder: 'placeholder', formats: { ... }, bounds: document.body, readyOnly: false) to config toolbar module, other modules, default theme, allowed formats, ...
- set theme name: theme="snow" (default: 'snow')
- set readOnly: read-only="" (default: false) - requires true or false
- overwrite global config for each editor: modules="modulesConfig"
- set placeholder: placeholder="'Inser your text here'" or placeholder="''" for empty string
- set bounds: bounds="...", change the default boundary element of the editor (document.body) - set it to 'self' and the editor element is used
- override formats: formats="formatsArray", per default all quill formats are allowed
- set max-length: max-length="5", adds validation for maxlength (sets model state to invalid and adds ng-invalid-maxlength class)
- set min-length: min-length="5", adds validation for minlength (sets model state to invalid and adds ng-invalid-minlength class), only works for values > 1, if you only want to check if there is a value --> use required/ng-required
- set strict: activate/deactivate strict editor mode (default: true)
- set scrollingContainer: set html element or css selector that gets the scrollbars
- use custom-options for adding for example custom font sizes (see example in demo.html) --> this overwrites this options globally !!!
- format - default 'html', possible values 'json' | 'object' | 'html' | 'text', so you are able to set quill operation object, html or plain text to your model
- styles - set dynamic inline editor styles - styles="{ backgroundColor: 'red' }"
- sanitize - santize the model content if format is html (default: false)
- debug - set debug level, allowed 'error', 'warn', 'log', true, false (default: 'warn')
- trackChanges - check if only user (quill source user) or all change should be trigger model update, default user. Using all is not recommended, it cause some unexpected sideeffects. But useful for 3rd Party modules and blots to keep your model up to date
- preserveWhitespace - default: false - possbility to use a pre-tag instead of a div-tag for the contenteditable area to preserve duplicated whitespaces | caution if used with syntax plugin Related issue
Callback/Outputs
- onEditorCreated: triggered after editor is created and provides editor-object on-editor-created="myCallback(editor)"
- onContentChanged: triggered after changes in the editor. Provides editor-object, html representation and text representation on-content-changed="myCallback(editor, html, text, content, delta, oldDelta, source)"
- onSelectionChanged: triggered after text selection changed on-selection-changed="myCallback(editor, range, oldRange, source)" - content = quill editor content object, text = content as plain text, html = content as html string
- onFocus: triggered if editor gets focus on-focus="myCallback(editor, source)"
- onBlur: triggered if editor gets focus on-blur="myCallback(editor, source)"`