带有气泡菜单扩展的Tiptap

Question

我正在使用Livewire/Alpinejs堆栈，还安装了tiptap编辑器。到目前为止，遵循这个link，编辑器就可以使用它的基本功能/按钮了。我想要的是在游戏中添加气泡菜单扩展。我已经安装了这个包，也遵循了这个link中的文档，但它不工作(在选择一个单词后，气泡菜单将不会出现)。下面是代码。

​

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import BubbleMenu from '@tiptap/extension-bubble-menu'

window.setupEditor = function (content) {
  return {
    editor: null,
    content: content,

    init(element) {
      this.editor = new Editor({
        element: element,
        extensions: [
          StarterKit,
          BubbleMenu.configure({
            element: document.querySelector('#menu'),
          }),
        ],
        content: this.content,
        onUpdate: ({ editor }) => {
          this.content = editor.getHTML()
        }
      })

      this.$watch('content', (content) => {
        // If the new content matches TipTap's then we just skip.
        if (content === this.editor.getHTML()) return

        /*
          Otherwise, it means that a force external to TipTap
          is modifying the data on this Alpine component,
          which could be Livewire itself.
          In this case, we just need to update TipTap's
          content and we're good to do.
          For more information on the `setContent()` method, see:
            https://www.tiptap.dev/api/commands/set-content
        */
        this.editor.commands.setContent(content, false)
      })
    }
  }
}

<div
    x-data="setupEditor($wire.entangle('{{ $attributes->wire('model')->value() }}').defer)"
    x-init="() => init($refs.editor)"
    wire:ignore
    {{ $attributes->whereDoesntStartWith('wire:model') }}
>

    <template>
        <div id="menu">
            <div x-if="editor">
                <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
                    bold
                </button>
            </div>
        </div>
    </template>
    <div x-ref="editor"></div>
</div>

​

Answer 1

我需要更改id并将其放入父元素(模板)。

<template x-if="editor" id="menu">
    <div>
        <div>
            <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
                bold
            </button>
        </div>
    </div>
</template>