气泡菜单例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>tiptap 气泡菜单例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/tiptap-vue2/prosemirror.js"></script>
    <script src="https://www.itxst.com/package/tiptap-vue2/vue.min.js"></script>
    <script src="https://www.itxst.com/package/tiptap-vue2/utils.min.js"></script>
    <script src="https://www.itxst.com/package/tiptap-vue2/commands.min.js"></script>
    <script src="https://www.itxst.com/package/tiptap-vue2/tiptap.min.js"></script>
    <script src="https://www.itxst.com/package/tiptap-vue2/extensions.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="app">
        <div class="editor">
            <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
                <div :style="` position:absolute; display: block;left: ${menu.left}px; top: ${220-menu.bottom}px`">
                    <div v-if="menu.isActive">
                        <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
                            Bold
                        </button>
                        <button :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                            @click="commands.heading({ level: 2 })">
                            H2
                        </button>
                    </div>
                </div>
            </editor-menu-bubble>
            <editor-content class="editor__content" :editor="editor"> </editor-content>
        </div>
    </div>
    <script>
        // vue2 演示例子，文档地址 https://www.itxst.com/tiptap/tutorial.html
        const {
            Blockquote,
            CodeBlock,
            HardBreak,
            Heading,
            OrderedList,
            BulletList,
            ListItem,
            TodoItem,
            TodoList,
            Bold,
            Code,
            Italic,
            Link,
            Table,
            TableHeader,
            TableCell,
            TableRow,
            Strike,
            Underline,
            History
        } = tiptapExtensions;

const { EditorMenuBubble, EditorContent, EditorMenuBar, Editor } = tiptap;
        var app = new Vue({
            el: '#app',
            components: {
                EditorContent: EditorContent,
                EditorMenuBar: EditorMenuBar,
                EditorMenuBubble: EditorMenuBubble
            },
            data() {
                return {
                    editor: new Editor({
                        extensions: [
                            new Blockquote(),
                            new BulletList(),
                            new CodeBlock(),
                            new HardBreak(),
                            new Heading({ levels: [1, 2, 3] }),
                            new ListItem(),
                            new OrderedList(),
                            new TodoItem(),
                            new TodoList(),
                            new Link(),
                            new Bold(),
                            new Code(),
                            new Italic(),
                            new Strike(),
                            new Underline(),
                            new History(),
                            new Table({
                                resizable: true,
                            }),
                            new TableHeader(),
                            new TableCell(),
                            new TableRow(),
                        ],
                        content: ` itxst.com 选中文字试试看 `,
                    }),
                }
            },
            beforeDestroy() {
                this.editor.destroy()
            },
            methods: {
                //获取Html
                getHTML() {
                    this.result = this.editor.getHTML();
                },

}
        });

</script>
    <style scoped>
        .editor {
            width: 100%;
            border: solid 1px #ddd;
            border-radius: 3px;
        }

.editor .editor__content {
            color: #333;
            border-top: solid 1px #ddd;
            padding: 0px 6px;

}

.editor .ProseMirror {
            min-height: 200px;
        }

.editor .ProseMirror-focused {
            border: none;
            outline: none;
        }

.is-active {
            color: #1512e6;
        }
    </style>
</body>
</html>