gjs-quill
v1.0.1
Published
Grapesjs Quill
Downloads
174
Readme
Grapesjs Quill
It is important that you include
https://cdn.quilljs.com/1.3.7/quill.bubble.css
in your final output so that quill styles are applied outside the editor too.
Quill RTE intergration for grapesjs
.
Sponsered by:
Setup as shown in
index.html
HTML
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/gjs-quill"></script>
<div id="gjs"></div>
JS
const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
plugins: ['gjs-quill'],
});
CSS
body, html {
margin: 0;
height: 100%;
}
Summary
- Plugin name:
gjs-quill
Options
| Option | Description | Default |
|-|-|-
| quillOpts
| Options for configuring quill | {}
|
| clipboard
| Use custom clipboard | true
|
Download
- CDN
https://unpkg.com/gjs-quill
- NPM
npm i gjs-quill
- GIT
git clone https://github.com/Ju99ernaut/gjs-quill.git
Usage
Directly in the browser
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/gjs-quill.min.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['gjs-quill'],
pluginsOpts: {
'gjs-quill': { /* options */ }
}
});
</script>
Modern javascript
import grapesjs from 'grapesjs';
import plugin from 'gjs-quill';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { /* options */ }
}
// or
plugins: [
editor => plugin(editor, { /* options */ }),
],
});
Development
Clone the repository
$ git clone https://github.com/Ju99ernaut/gjs-quill.git
$ cd gjs-quill
Install dependencies
$ npm i
Start the dev server
$ npm start
Build the source
$ npm run build
License
MIT