Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwinding/quill-html-edit-button
Quill.js Module which allows you to quickly view/edit the HTML in the editor
https://github.com/benwinding/quill-html-edit-button
html javascript quill
Last synced: 10 days ago
JSON representation
Quill.js Module which allows you to quickly view/edit the HTML in the editor
- Host: GitHub
- URL: https://github.com/benwinding/quill-html-edit-button
- Owner: benwinding
- License: mit
- Created: 2019-10-31T04:46:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T01:33:35.000Z (2 months ago)
- Last Synced: 2024-10-25T16:57:15.578Z (16 days ago)
- Topics: html, javascript, quill
- Language: TypeScript
- Homepage: https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-1.x.html
- Size: 10.1 MB
- Stars: 157
- Watchers: 7
- Forks: 42
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-quill - quill-html-edit-button - A module to add a button which allows you to view/edit the raw HTML in the quill editor. (Uncategorized / Uncategorized)
README
# quill-html-edit-button
[](https://www.npmjs.com/package/quill-html-edit-button)
[](https://github.com/benwinding/quill-html-edit-button/blob/master/LICENSE)
[](https://www.npmjs.com/package/quill-html-edit-button)
[](https://github.com/benwinding/quill-html-edit-button)
Quill.js Module which allows you to quickly view/edit the HTML in the editor
- [Live Demo (webpack javascript)](https://benwinding.github.io/quill-html-edit-button/javascript/) - also > [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/javascript)
- [Live Demo (webpack typescript)](https://benwinding.github.io/quill-html-edit-button/typescript/) - also > [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/typescript)
- [Live Demo (webpack vue)](https://benwinding.github.io/quill-html-edit-button/vue/) - also > [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/vue)
- [Live Demo (script tags quill-1.x)](https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-1.x.html) - also > [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/script-tags/demo-quill-1.x.html)
- [Live Demo (script tags quill-2.x) With Tables!](https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-2.x.html) - also > [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/script-tags/demo-quill-2.x.html)
## Install
`yarn add quill-html-edit-button`
## Quickstart (Javascript)
``` js
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 [`demos/typescript/src/index.ts`](https://github.com/benwinding/quill-html-edit-button/blob/master/demos/typescript/src/index.ts)
- The file [`setup.js`](https://github.com/benwinding/quill-html-edit-button/blob/master/demos/typescript/src/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:
``` json
"compilerOptions": {
"allowJs": true,
"checkJs": false
}
```
## Quickstart (script tag)
``` html
Quill.register("modules/htmlEditButton", htmlEditButton);
const quill = new Quill(editor, {
// ...
modules: {
// ...
htmlEditButton: {}
}
});
```
## Options
``` js
modules: {
// ...
htmlEditButton: {
debug: true, // logging, default:false
msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
okText: "Ok", // Text to display in the OK button, default: Ok,
cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
buttonHTML: "<>", // Text to display in the toolbar button, default: <>
buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
editorModules: {} // The default mod
}
}
```
### 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:
``` html
```
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:
``` ts
// options
htmlEditButton: {
// Flags
debug?: boolean; // default: false
syntax?: boolean; // default: false
// Overlay
closeOnClickOverlay: boolean; // default: true
prependSelector: string; // default: null
// Labels
buttonHTML?: string; // default: "<>"
buttonTitle?: string; // default: "Show HTML source"
msg: string; // default: 'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced'
okText: string; // default: "Ok"
cancelText: string; // default: "Cancel"
// Quill Modules (for the HTML editor)
editorModules?: { // default: null
// Any modules here will be declared in HTML quill editor instance
keyboard: {
bindings: {
custom: {
key: 'a',
handler: function(range, context) {
console.log('A KEY PRESSED!');
}
},
},
},
},
},
```
## Thanks
This project is based on [quill-image-uploader](https://github.com/NoelOConnell/quill-image-uploader), thanks mate!