tiptap Image 是用来显示图片用的扩展,默认把图片渲染为block块元素,如果你要内联模式可以把 inline 属性设置为true,内联模式就是图片和文字可以在同一行。
//作者:https://www.itxst.com
npm install @tiptap/extension-image
inline 内联模式默认为false,如果是true可以把多张图片显示在一行。
Image.configure({
inline: true,
})
allowBase64 允许将图像解析为base64字符串。
Image.configure({
allowBase64: true,
})
HTMLAttributes 自定义标签对应的HTML属性。
Image.configure({
HTMLAttributes: {
class: 'custom-class',
},
})
setImage 将当节点设置为图片。
editor.commands.setImage({ src: 'https://www.itxst.com/img/logov31.png' })
editor.commands.setImage({ src: 'https://www.itxst.com/img/logov31.png', alt: 'itxst的logo', title: 'An example' })
Vue 例子
React 例子
<template>
<div v-if="editor">
<button @click="addImage">
setImage
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import Document from '@tiptap/extension-document'
import Dropcursor from '@tiptap/extension-dropcursor'
import Image from '@tiptap/extension-image'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
methods: {
addImage() {
const url = window.prompt('URL')
if (url) {
this.editor.chain().focus().setImage({ src: url }).run()
}
},
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Image,
Dropcursor,
],
content: `
<p>Tiptap图片例子.</p>
<img src="https://www.itxst.com/img/logov31.png" />
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style>
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
img {
max-width: 100%;
height: auto;
&.ProseMirror-selectednode {
outline: 3px solid #68CEF8;
}
}
}
</style>
import Document from '@tiptap/extension-document'
import Dropcursor from '@tiptap/extension-dropcursor'
import Image from '@tiptap/extension-image'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React, { useCallback } from 'react'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, Image, Dropcursor],
content: `
<p>This is a basic example of implementing images. Drag to re-order.</p>
<img src="https://www.itxst.com/img/logov31.png" />
`,
})
const addImage = useCallback(() => {
const url = window.prompt('URL')
if (url) {
editor.chain().focus().setImage({ src: url }).run()
}
}, [editor])
if (!editor) {
return null
}
return (
<div>
<button onClick={addImage}>setImage</button>
<EditorContent editor={editor} />
</div>
)
}