Native web components for the Quill Rich Text Editor built with stencil
MIT License
Native web components for the Quill Rich Text Editor
If you like my work, feel free to support it. Donations to the project are always welcomed :)
PayPal: PayPal.Me/bengtler
npm install stencil-quill
node_modules/stencil-quill/dist/quill-components.js
in your index.html or add it to your build process or projectquill
v2! and include it + theme css in your buildprocess, module or index.html
! (the component is using the global Quill object)<quill-editor content="" format="html" theme="snow"></quill-editor>
html
, values: html | text | json
, sets the model value type - html = html string, json = quill operations as json string, text = plain text{
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
styles="{height: '250px'}"
Insert text here ...
document.body
, pass 'self' to attach the editor elementquill-toolbar
:<quill-component content="test">
<div slot="quill-toolbar">
<span class="ql-formats">
<select class="ql-font">
<option value="aref">Aref Ruqaa</option>
<option value="mirza">Mirza</option>
<option selected>Roboto</option>
</select>
<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>
<span class="ql-formats">
<div id="counter"></div>
</span>
</div>
</quill-component>
top
, possible values top
, bottom
warn
, error
, log
or false
to deactivate logging, default: warn
null
editor
{
editor: editorInstance,
html: html,
text: text,
content: content,
delta: delta,
oldDelta: oldDelta,
source: source
}
{
editor: editorInstance,
range: range,
oldRange: oldRange,
source: source
}
{
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)
}
It renders a readOnly quilljs editor without a border and toolbar. Does not provide any Events, but has similar properties.
<quill-view content="" format="html" theme="snow"></quill-view>
html
, values: html | text | json
, sets the model value type - html = html string, json = quill operations as json string, text = plain textsnow
styles="{height: '250px'}"
warn
, error
, log
or false
to deactivate logging, default: warn
null
It renders an quilljs html string as you would expect it without createing a quilljs instance.
<quill-view-html content="" theme="snow"></quill-view-html>
snow
<script src='https://unpkg.com/stencil-quill/dist/quill-components/quill-components.js'></script>
in the head of your index.htmlnpm install stencil-quill --save
<script src='node_modules/stencil-quill/dist/quill-components/quill-components.js'></script>
in the head of your index.htmlnpm install stencil-quill --save
import quill-components;