quill-html-edit-button
Quill.js Module which allows you to quickly view/edit the HTML in the editor
Install
yarn add quill-html-edit-button
Quickstart (Javascript)
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import htmlEditButton from "quill-html-edit-button";
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
"modules/htmlEditButton": htmlEditButton
})
const quill = new Quill(editor, {
modules: {
htmlEditButton: {}
}
});
Quickstart (typescript)
Due to Quill's implementation, typescript integration is not trivial:
- Follow the demo example here
src/demos/typescript/demo.ts
- The file
setup.js
is to use the library without types (as they aren't implemented with quill modules). - Your
tsconfig.json
needs the following properties, to prevent errors:
"compilerOptions": {
"allowJs": true,
"checkJs": false
}
Quickstart (script tag)
<script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
<script src="https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js"></script>
<script>
Quill.register("modules/htmlEditButton", htmlEditButton);
const quill = new Quill(editor, {
modules: {
htmlEditButton: {}
}
});
</script>
Options
modules: {
htmlEditButton: {
debug: true,
msg: "Edit the content in HTML format",
okText: "Ok",
cancelText: "Cancel",
buttonHTML: "<>",
buttonTitle: "Show HTML source",
syntax: false,
prependSelector: 'div#myelement',
editorModules: {}
}
}
Syntax Highlighting
By default syntax highlighting is off, if you want to enable it use syntax: true
in the options (as shown above) and make sure you add the following script tags:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/github.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script
charset="UTF-8"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js"
></script>
Alternatively, include these scripts in your package bundler, as long as highlightjs is available in the global space at window.hljs
.
Customising The HTML Editor
The editor itself is actually a Quill Editor instance too! So you can pass in custom modules like this:
htmlEditButton: {
debug?: boolean;
syntax?: boolean;
closeOnClickOverlay: boolean;
prependSelector: string;
buttonHTML?: string;
buttonTitle?: string;
msg: string;
okText: string;
cancelText: string;
editorModules?: {
keyboard: {
bindings: {
custom: {
key: 'a',
handler: function(range, context) {
console.log('A KEY PRESSED!');
}
},
},
},
},
},
Thanks
This project is based on quill-image-uploader, thanks mate!