This is a set of Quill modules, designed to be used together, that fully integrate with the Quill Delta format to provide resizable, floatable images that cleanly "round trip" between HTML and JSON.
Visit our code sandbox to try it out yourself.
This project is a fork and rewrite of quill-blot-formatter, which is itself a fork of an earlier work. This project makes the following improvements:
@xeger/quill-image-formats
which extends Quill's built-in Image
blot with new formats; and @xeger/quill-image-actions
which contains the UI for applying and removing those formats.align
(an existing block format) to images, we define a new float
format which allows text to wrap naturally around images.quill
or parchment
packages, making them more portable and compatible with a wider range of transpilation environments, including "no transpilation" i.e. direct embedding in an HTML page alongside the Quill distribution bundle.Note: these packages are pure Node modules and do not have default exports. They are distributed with both a CommonJS bundle and an ES module. The primary export from each package is a Quill module, but additional, nested exports provide access to the implementation details to facilitate customization. Typings are provided for all exports.
See the demo page or the code sandbox for a complete, working example.
Whenever you new Quill
, make sure to include the formats and the modules in its configuration; otherwise things will not work right.
Important: It seems that there is a conflict between Quill and Tailwind CSS, which applies display: block
to img tag which, prevents the float
styles in quill-image-formats
from affecting the image positioning.
If your project uses both Tailwind and Quill, you need to add extra CSS rules so that img
inside the Quill editor are positioned as inline
or inline-block
; otherwise, the image alignment features of quill-image-actions
will not work.
Add the quill-image
packages to your project's dependencies.
npm install @xeger/quill-image-actions --save-prod
npm install @xeger/quill-image-formats --save-prod
At startup, import the extension modules and register them with react-quill
's wrapper of the Quill framework.
import { Quill } from 'react-quill';
import { ImageActions } from '@xeger/quill-image-actions';
import { ImageFormats } from '@xeger/quill-image-formats';
Quill.register('modules/imageActions', ImageActions);
Quill.register('modules/imageFormats', ImageFormats);
Whenever you new ReactQuill
, make sure to include the formats and the modules in its configuration; otherwise things will not work right.
import React from 'react';
import ReactQuill from 'react-quill';
const formats = ['align', 'float'];
const modules = {
imageActions: {},
imageFormats: {},
toolbar: [
[{ 'align': [] }],
['clean']
]
};
export const Editor(): React.FC = () => (
<ReactQuill
formats={formats}
modules={modules}
theme="snow"
/>
);