tiptap编辑器非常简洁,你可以完全的定制它的外观, menus菜单也一样。 tiptap提供的API来触发命令和添加活动状态, tiptap提供了一些实用程序和组件使菜单的定位更容易。
tiptap并没有提供类似其他编辑器的顶部菜单组件,但是你可以自己用任何html元素来实现。
当用户选中编辑器中的文字时,tiptap将会在光标上方弹出菜单,JavaScript中用法如下
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
tiptap vue3 中气泡菜单用法如下
<template>
<div>
<bubble-menu :editor="state.editor" :tippy-options="{ duration: 100 }" v-if="state.editor">
<button @click="state.editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': state.editor.isActive('bold') }">
bold
</button>
<button @click="state.editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': state.editor.isActive('italic') }">
italic
</button>
<button @click="state.editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': state.editor.isActive('strike') }">
strike
</button>
</bubble-menu>
<editor-content :editor="state.editor" />
</div>
</template>
<script setup>
/*
tiptap 中文文档
https://www.itxst.com/tiptap/tutorial.html
*/
import { onMounted, reactive } from "vue";
import { BubbleMenu, Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
const state = reactive({
editor: new Editor({
content: "<p>Tiptap 中文文档</p>",
extensions: [StarterKit],
autofocus: true,
editable: true,
}) as any,
});
onMounted(() => { });
</script>
<style scoped>
.editor {
margin: 10px 20px;
width: 390px;
border-radius: 6px;
}
.editor:deep(.ProseMirror) {
color: red;
border: solid 1px #ddd;
padding: 0px 6px;
border-radius: 6px;
}
</style>
react 中气泡菜单用法如下
import './styles.scss'
import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, { useEffect } from 'react'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
],
content: `
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
</p>
`,
})
const [isEditable, setIsEditable] = React.useState(true)
useEffect(() => {
if (editor) {
editor.setEditable(isEditable)
}
}, [isEditable, editor])
return (
<>
<div>
<input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
Editable
</div>
{editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('strike') ? 'is-active' : ''}
>
strike
</button>
</BubbleMenu>}
<EditorContent editor={editor} />
</>
)
}
当点击tiptap编辑器空白行时,将会显示浮动的菜单,下面的代码将会展示在JS、VUE、React中的使用方法。
在js中的使用方法
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
在Vue3中的使用方法
<template>
<div class="editor">
<floating-menu :editor="state.editor" :tippy-options="{ duration: 100 }" v-if="state.editor">
<button @click="state.editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': state.editor.isActive('heading', { level: 1 }) }">
H1
</button>
<button @click="state.editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': state.editor.isActive('heading', { level: 2 }) }">
H2
</button>
<button @click="state.editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': state.editor.isActive('bulletList') }">
Bullet List
</button>
</floating-menu>
<editor-content :editor="state.editor" />
</div>
</template>
<script setup lang="ts">
/*
tiptap 中文文档
https://www.itxst.com/tiptap/tutorial.html
*/
import { onMounted, reactive } from "vue";
import { FloatingMenu , Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
const state = reactive({
editor: new Editor({
content: "<p>Tiptap 中文文档,点击编辑器的空白处试试看</p>",
extensions: [StarterKit],
autofocus: true,
editable: true,
}) as any,
});
onMounted(() => { });
</script>
<style scoped>
.editor {
margin: 10px 20px;
width: 390px;
border-radius: 6px;
}
.editor:deep(.ProseMirror) {
color: red;
border: solid 1px #ddd;
padding: 0px 6px;
border-radius: 6px;
min-height: 160px;
}
</style>
在React中的使用方法
import './styles.scss'
import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, { useEffect } from 'react'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
],
content: `
<p>
This is an example of a Medium-like editor. Enter a new line and some buttons will appear.
</p>
<p></p>
`,
})
const [isEditable, setIsEditable] = React.useState(true)
useEffect(() => {
if (editor) {
editor.setEditable(isEditable)
}
}, [isEditable, editor])
return (
<>
<div>
<input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
Editable
</div>
{editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
h1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
h2
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
bullet list
</button>
</FloatingMenu>}
<EditorContent editor={editor} />
</>
)
}
//样式文件
import './styles.scss'
.ProseMirror { > * + * { margin-top: 0.75em; } ul, ol { padding: 0 1rem; }}
tiptap编辑器的加粗和颜色菜单是如何让选中的对象/文字改变颜色大小的呢?当鼠标点击对象/文字菜单又是如何知道是加粗菜单还是设置颜色菜单的呢?以下代码表示将选中文字加粗
editor.chain().focus().toggleBold().run()
editor编辑器对象
chain告诉编辑器需要执行命令
focus执行完后让编辑器获得焦点
toggleBold加粗选中的文字
run执行命令
激活状态,当选中文字时可以获取编辑器的激活状态是加粗还是颜色等,下面的代码表示当选中的文字被加粗则给按钮加上“is-active”样式
<button :class="{ 'is-active': editor.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()"> Bold</button>
isActive方法适应nodes 和marks还支持特定的属性,如下代码当设置颜色为#000000,选中这个颜色才能激活颜色菜单
//选择#000000颜色才返回是否激活状态
editor.isActive('textStyle', { color: '#000000' })
//也可以是正则表达式
editor.isActive('textStyle', { color: /.*/ })
<template>
<div class="editor">
<span :class="{'is-active-color': state.editor.isActive('textStyle', {color: 'rgb(0, 0, 0)',})}">
{{ state.editor.getAttributes("textStyle").color }}
<input type="color" @input="onColor" :value="state.editor.getAttributes('textStyle').color" />
</span>
<editor-content :editor="state.editor" />
</div>
</template>
<script setup lang="ts">
/*
tiptap 中文文档
https://www.itxst.com/tiptap/tutorial.html
*/
import { onMounted, reactive } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Color from "@tiptap/extension-color";
import TextStyle from "@tiptap/extension-text-style";
const state = reactive({
editor: new Editor({
content:
'Tiptap 中文文档,<span style="color: #000000">点击黑色文字</span>试试看效果',
extensions: [
StarterKit,
TextStyle,
Color.configure({
types: ["textStyle"],
}),
],
autofocus: true,
editable: true,
}) as any,
});
onMounted(() => { });
//设置颜色
const onColor = ($event: any) => {
// debugger;
state.editor.chain().focus().setColor($event.target.value).run();
};
</script>
<style scoped>
.editor {
margin: 10px 20px;
width: 390px;
border-radius: 6px;
}
.editor:deep(.ProseMirror) {
color: red;
border: solid 1px #ddd;
padding: 0px 6px;
border-radius: 6px;
min-height: 160px;
}
.is-active-color {
background-color: black;
padding: 6px 6px;
color: #fff;
}
</style>
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。