tiptap Image 图片扩展

tiptap Image 是用来显示图片用的扩展，默认把图片渲染为block块元素，如果你要内联模式可以把 inline 属性设置为true，内联模式就是图片和文字可以在同一行。

Install 安装

//作者：https://www.itxst.com
npm install @tiptap/extension-image

Settings 配置

inline 内联模式默认为false,如果是true可以把多张图片显示在一行。

Image.configure({
  inline: true,
})

allowBase64 允许将图像解析为base64字符串。

Image.configure({
  allowBase64: true,
})

HTMLAttributes 自定义标签对应的HTML属性。

Image.configure({
  HTMLAttributes: {
    class: 'custom-class',
  },
})

Commands 命令

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' })

源代码

image 源代码

在线例子

vue 在线例子

Image 例子

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>
  )
}

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。