tiptap-extension-resizable-image
v1.0.5
Published
Resizable image extension for Tiptap
Downloads
4,604
Maintainers
Readme
tiptap-extension-resizable-image
Links
Quickstart
Installation
npm install tiptap-extension-resizable-image
Import the CSS file:
import 'tiptap-extension-resizable-image/styles.css';
Add the extension to Tiptap:
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { ResizableImage } from 'tiptap-extension-resizable-image';
const Demo = () => {
const editor = useEditor({
extensions: [StarterKit, ResizableImage],
content: /* html */ `
<p>
<img
src="https://daily.jstor.org/wp-content/uploads/2016/10/Moving_Forest_1050_700.jpg"
alt="image alt"
title="image title"
width="300"
data-keep-ratio="true"
>
</p>
`,
});
return (
<div>
<EditorContent editor={editor} className='editor' />
</div>
);
};
export default Demo;
Commands
setResizableImage
editor.commands.setResizableImage({
src: '',
alt: '',
title: '',
width: 200,
height: 200,
className: '',
'data-keep-ratio': true,
caption: '',
});
License
The MIT License.