An update of quill module quill-blot-formatter to make alignments compatible with Quill V2. Out of the box supports resizing and realigning images and iframe videos, but can be easily extended using BlotSpec
and Action
.
npm install --save @enzedonline/quill-blot-formatter2
Download both from the dist folder in this repository, or use jsdelivr CDN's:
<script
src="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@2/dist/js/quill-blot-formatter2.min.js">
</script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@2/dist/css/quill-blot-formatter2.css"
>
import Quill from 'quill';
Quill.register('modules/blotFormatter2', BlotFormatter2);
const quill = new Quill(..., {
modules: {
...
blotFormatter2: {
// see config options below
}
}
});
quill-blot-formatter2.min.js
is provided which exports the same modules as index.js
under the global QuillBlotFormatter2
.
<script src="<quill>"></script>
<script src="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@2/dist/js/quill-blot-formatter2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@2/dist/css/quill-blot-formatter2.css">
<script>
Quill.register('modules/blotFormatter2', QuillBlotFormatter2.default);
const quill = new Quill(..., {
modules: {
...
blotFormatter2: {
// see config options below
}
}
}
);
</script>
Alignment and placing is handled by css classes, one set each for image and iframe:
.ql-image-align-left, .ql-image-align-center, .ql-image-align-right,
.ql-iframe-align-left, .ql-iframe-align-center, .ql-iframe-align-right
Suggested css can be found in src/css/quill-blot-formatter2.css (shown below). This is also exported to the dist folder.
These styles are not loaded automatically, it is up to you to load the styles relevant to your site.
div.ql-editor .ql-image-align-left,
div.ql-editor .ql-iframe-align-left {
float: left;
padding: 0.5em 1em 0.5em 0;
}
div.ql-editor .ql-image-align-center,
div.ql-editor .ql-iframe-align-center {
text-align: center;
margin: 0 auto;
display: block;
padding: 0.5em 0;
}
div.ql-editor .ql-image-align-right,
div.ql-editor .ql-iframe-align-right {
float: right;
padding: 0.5em 0 0.5em 1em;
}
The BlotSpec
(/src/specs/BlotSpec.ts) classes define how BlotFormatter
interacts with blots. They take the BlotFormatter
as a constructor arg and have the following functions:
Called after all specs have been constructed. Use this to bind to quill events to determine when to activate a specific spec.
The actions
that are allowed on this blot. The default is [AlignAction, ResizeAction, DeleteAction]
.
When the spec is active this should return the element that is to be formatted
When the spec is active this should return the element to display the formatting overlay. This defaults to return getTargetElement()
since they will typically be the same element.
After the spec is activated this should set the quill selection using setSelection
. Defaults to quill.setSelection(null)
.
Called when the spec is deactivated by the user clicking away from the blot. Use this to clean up any state in the spec during activation.
Each spec should call this.formatter.show(this);
to request activation. See specs/
(/src/specs) for the built-in specs.
The Action
(/src/actions/Action.ts) classes define the actions available to a blot once its spec is activated. They take the BlotFormatter
as a constructor arg and have the following functions:
Called immediately after the action is created. Use this to bind quill events and create elements to attach to the overlay.
Called when the formatter has changed something on the blot. Use this to update any internal state.
Called when the formatter is hidden by the user.
See actions/
(/src/actions) for the existing actions.
Using quill module options it's easy to disable existing specs, actions, or to override any of the styles provided by this module. For example: if you wanted to remove resizing, support only images, and change the overlay border the following config would work:
import Quill from 'quill';
// from main module
import BlotFormatter2, { AlignAction, DeleteAction, ImageSpec } from 'quill-blot-formatter2'
Quill.register('modules/blotFormatter2', BlotFormatter2);
class CustomImageSpec extends ImageSpec {
getActions() {
return [AlignAction, DeleteAction];
}
}
const quill = new Quill(..., {
modules: {
...
blotFormatter2: {
specs: [
CustomImageSpec,
],
overlay: {
style: {
border: '2px solid red',
}
}
}
}
});
- For all supported options as well as the default see
Options
(/src/Options.ts). - object properties are merged, but array properties override the defaults.
- To completely disable styles (
overlay.style
,resize.handleStyle
, etc) set those tonull