Tiptap 实现图片编辑功能：点击图片显示 BubbleMenu 以调整宽高

1、安装 Tiptap 所需的依赖

确保已经安装了 Tiptap 的核心包和必要的扩展

npm install @tiptap/core @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-bubble-menu

2、定义扩展和编辑器

可以在编辑器中通过 @tiptap/extension-image 来处理图片，并且通过 @tiptap/extension-bubble-menu 来处理弹出菜单。

以下是基本的代码实现

import { Editor } from '@tiptap/react';
import { useEditor, EditorContent } from '@tiptap/react';
import { StarterKit } from '@tiptap/starter-kit';
import { Image } from '@tiptap/extension-image';
import { BubbleMenu } from '@tiptap/extension-bubble-menu';
import { useState } from 'react';

const ImageEditor = () => {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const editor = useEditor({
    extensions: [
      StarterKit,
      Image,
      BubbleMenu.configure({
        element: document.createElement('div'),
        pluginKey: 'image-bubble-menu',
      }),
    ],
    content: `
      <p>这是一张图片</p>
      <img src="https://placekitten.com/300/300" alt="Cat" />
    `,
    onUpdate: ({ editor }) => {
      const image = editor.getSelectedElement();
      if (image && image.tagName === 'IMG') {
        setWidth(image.width);
        setHeight(image.height);
      }
    },
  });

  const updateImageSize = () => {
    const image = editor?.getSelectedElement();
    if (image && image.tagName === 'IMG') {
      image.style.width = `${width}px`;
      image.style.height = `${height}px`;
    }
  };

  return (
    <div>
      <EditorContent editor={editor} />
      <BubbleMenu editor={editor} className="image-bubble-menu">
        <div>
          <label>Width</label>
          <input
            type="number"
            value={width}
            onChange={(e) => setWidth(parseInt(e.target.value))}
          />
          <label>Height</label>
          <input
            type="number"
            value={height}
            onChange={(e) => setHeight(parseInt(e.target.value))}
          />
          <button onClick={updateImageSize}>Update</button>
        </div>
      </BubbleMenu>
    </div>
  );
};

export default ImageEditor;

3、详细解释

• Tiptap 编辑器：初始化一个 Tiptap 编辑器，包含了 StarterKit 和 Image 扩展。Image 扩展允许插入图片。

• BubbleMenu：我们配置了 BubbleMenu 来在图片被选中时显示菜单。在此示例中，我们使用了 width 和 height 控件来调整图片的尺寸。

• 更新图片尺寸：通过 editor.getSelectedElement() 获取当前选中的元素，如果它是图片（IMG），我们通过直接操作其 style 来更新宽度和高度。

4、样式（可选）

为弹出的 BubbleMenu 添加自定义样式。例如：

.image-bubble-menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
  z-index: 10;
}

5、结果

当用户点击图片时，BubbleMenu 会显示在图片上方，允许用户修改图片的宽度和高度。用户调整后，点击更新按钮即可保存修改。