QRCode Jodit plugin

QR codes for the Jodit editor: a toolbar button that turns any text or link into a QR code image, with a live preview and editing of inserted codes. The image is generated in the browser, no server needed.

Documentation and live demo

Install

npm install jodit jodit-plugin-qrcode

import { Jodit } from 'jodit';
import 'jodit/es2021/jodit.min.css';
import 'jodit-plugin-qrcode';

Jodit.make('#editor', {
	qrcode: { size: 200, format: 'png' }
});

The qrcode library is installed with the plugin.

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit@4/es2021/jodit.min.css">
<script src="https://cdn.jsdelivr.net/npm/jodit@4/es2021/jodit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jodit-plugin-qrcode/dist/es2021/plugins/qrcode/qrcode.min.js"></script>

The browser build already contains the qrcode library. Loading through the Jodit extraPlugins option is supported too; see Installation.

Options

| Option | Default | Description | | --- | --- | --- | | size | 200 | Width and height of the image, in pixels | | margin | 1 | Empty border around the code, in modules | | errorCorrectionLevel | 'M' | 'L', 'M', 'Q' or 'H' | | dark | '#000000' | Color of the dark modules | | light | '#ffffff' | Background color, #ffffff00 for transparent | | format | 'png' | 'png' or 'svg' | | useSelection | true | Open the dialog with the selected text | | className | '' | CSS classes for the inserted image |

Details: Options.

License

MIT