tiptap-extension-image
Make tiptap support image tags to provide predefined styles for img.
Install
npm install tiptap-extension-image -SUsage
import Image from "tiptap-extension-image";
const editor = new Editor({
element: document.querySelector(".editor"),
extensions: [
StarterKit,
Image.configure({ inline: true, allowBase64: true })
],
});
editor
.chain()
.focus()
.setImage({
src: dataString,
})
.run();Supports the presence of the style attribute of the inserted img as baseStyle.
const html = `<img style="width: 100%; display: inline-block" src="/88f84b8.png"/>`
editor
.chain()
.focus()
.insertContent(html, {
parseOptions: {
preserveWhitespace: false,
},
})
.run();
// baseStyle: "width: 100%; display: inline-block"Relations
@tiptap/extension-image: https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-image
tiptap-appmsg-editor: https://github.com/KID-1912/tiptap-appmsg-editor