本文讲解的Blockquote扩展够在tiptap编辑器中使用html的blockquote标签,在新行开头输入>,它将神奇地转换为blockquote标签。
npm install @tiptap/extension-blockquote
添加你需要的html属性到标签
Blockquote.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
setBlockquote 将选中的内容转换成 Blockquote 引用
editor.commands.setBlockquote()
toggleBlockquote 将选中的内容转换成或取消 Blockquote 引用
editor.commands.setBlockquote()
unsetBlockquote 取消选中内容的 Blockquote 引用
editor.commands.unsetBlockquote()
Windows/Linux Control Shift B
MacOS Cmd Shift B
Vue 例子
React 例子
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
toggleBlockquote
</button>
<button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
setBlockquote
</button>
<button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
unsetBlockquote
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import Blockquote from '@tiptap/extension-blockquote'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
Blockquote,
],
content: `
<blockquote>
Nothing is impossible, the word itself says “I’m possible!”
</blockquote>
<p>Audrey Hepburn</p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style>
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
blockquote {
padding-left: 1rem;
border-left: 3px solid rgba(#0D0D0D, 0.1);
}
}
</style>
import Blockquote from '@tiptap/extension-blockquote'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'
export default () => {
const editor = useEditor({
extensions: [
Document,
Paragraph,
Text,
Blockquote,
],
content: `
<blockquote>
Nothing is impossible, the word itself says “I’m possible!”
</blockquote>
<p>Audrey Hepburn</p>
`,
})
if (!editor) {
return null
}
return (
<div>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
toggleBlockquote
</button>
<button
onClick={() => editor.chain().focus().setBlockquote().run()}
disabled={!editor.can().setBlockquote()}
>
setBlockquote
</button>
<button
onClick={() => editor.chain().focus().unsetBlockquote().run()}
disabled={!editor.can().unsetBlockquote()}
>
unsetBlockquote
</button>
<EditorContent editor={editor} />
</div>
)
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。