Quill
-
npm install quill
-
Include stylesheet
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
-
Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Does not work with a
<textarea>
-
Create the editor container
<div id="editor"><p>Hello World!</p> </div>
. Can either be a CSS selector or a DOM object. -
Include the Quill library
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
-
Initialize Quill editor
<script>
var options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill('#editor', options);
</script>
/*index.css: increase length of the text editor */
...
#editor {
height: 375px;
}
strong {
font-weight: bold !important;
}
...
- Use Quill as a Rich Text Editor in ASP.NET Core
- Bind Quill to asp net core model
- Creating A Rich Text Editor In Blazor Using Quill
- Quill-Examples-and-FAQ
- Getting to know QuillJS - Part 1 (Parchment, Blots, and Lifecycle)
- How do I post contents of a Quill editor in a form?
- How do I retrieve the contents of a Quill text editor
- Example
- A look at Quill.js
- Using Quill.JS To Build a WYSIWYG Editor For Your Website
- Quickstart
- WYSIWYG Laravel with Vue Components and Quill Editor
- How to save Quill.js values to Database Laravel 5.6
- How to get HTML content from Quill editor?
- Why We Moved From Quill to Slate
- Powered by Translate Rich text editor Quill upload pictures and videos
- Why Quill
- Creating A Rich Text Editor In Blazor Using Quill
- quill-html-edit-button
- HTML sanitization
- sanitize-html
- DOMPurify
Images
-
How to insert images by uploading to the server instead of Base64 encoding the images? #1089
-
UPLOAD IMAGES IN LARAVEL AND VUE FROM QUILL RICH TEXT EDITOR
-
Day 66: Nicer UI for Uploading Photos in Quill #100DaysOfIndieWeb
-
Extending default Quill handler for image to upload base64 data. #1400
-
upload image: replace the base64 url with the url getting from sever ? #2034
Workflow
- user Quill to gather user input
- Send Quill Delta JSON to the server
var json = JSON.stringify(deltaobject);
- Sanitize - assume it came from a malware bot that mimics Quill
- Store sanitized version in database
- For read-only, convert Delta to HTML and display
- For edit mode,
- fetch Quill Delta JSON
- convert to object
var delta = JSON.parse(json);
- render Delta object
quill.setContents(delta, 'silent')
Tables
- quill-better-table
- QuillJS table
- Vue-Quill-Editor
- Quill-better-table: Gives the quix rich text editor a powerful table editing function!
- Awesome Quill - A curated list of awesome things related to Quill
var form = document.getElementById("FormID"); // get form by ID
form.onsubmit = function () {
// onsubmit do this first
var name = document.querySelector("input[name=name]"); // set name input var
name.value = JSON.stringify(quill.getContents()); // populate name input with quill data
return true; // submit form
};
// Ah ok, you can populate the quill editor with your Delta data from the DB like so:
quill.setContents(<?=$object->name?>);
// https://codepen.io/iice/pen/vQKrWY
(function () {
function init(html) {
var quill = new Quill('#editor-container', {});
var delta = quill.clipboard.convert(html);
quill.setContents(delta, 'silent');
}
var html = `<h1>Hello</h1><p>World</p>`;
init(html);
})();
https://github.com/benwinding/quill-image-compress
///
window.onload = (event) => {
var qua = document.getElementById('qualifications');
{qua}
};
// [Delta not defined #1573](https://github.com/quilljs/quill/issues/1573)
// Delta is a dependency of Quill and included with the library. However if you have a build pipeline you probably still want to do the standard CommonJS import:
import Delta from 'quill-delta';
// but if you are just in the browser environment Quill also supplies an import method:
var Delta = Quill.import('delta');
// You are right the paste is not passing to the editor because of the thrown error.