1

我正在使用 Livewire/Alpinejs 堆栈并且还安装了tiptap 编辑器。到目前为止，在此链接之后，编辑器与其基本功能/按钮一起工作。我想要的是在游戏中添加气泡菜单扩展。我已经安装了该软件包，并且还按照此链接中的文档进行了操作，但它不起作用（选择单词气泡菜单后不会出现）。这是下面的代码。

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>

4

1 回答 1

2

我需要更改并将 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>
于 2021-06-23T20:48:00.850 回答