本文将讲解如何配置 tiptap 编辑器,其中包括如何初始化、加载配置扩展、样式的配置方法。
将来编辑器绑定到制定的元素,可以通过 DOM 选择器 querySelector 选择,可以通过元素的id、class、 类型、属性、属性值等来选取元素,vue 中并不需要去配置这个属性。
// tiptap 中文文档
// https://www.itxst.com/tiptap/tutorial.html
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: [
StarterKit,
],
})
// 你也可以在 编辑器初始化之前挂载到容器中
yourContainerElement.append(editor.options.element)
你可以将需要将扩展作为列表传递给编辑器。
// 使用默认扩展
new Editor({
extensions: [
StarterKit,
]
})
// 使用默认扩展和其他扩展
new Editor({
extensions: [
StarterKit,
Document,
Paragraph,
Text,
]
})
// 使用高亮
new Editor({
extensions: [
StarterKit,
Highlight,
],
})
设置编辑器的默认内容,可以是json或者html格式。
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
//通过html设置编辑器初始化内容
new Editor({
content: `<p>Example Text</p>`,
extensions: [
StarterKit,
],
})
//通过json设置编辑器初始化内容
new Editor({
content: {"type":"doc",
"content":[{"type":"paragraph",
"content":[{"type":"text","text":"itxst.com"}]}]},
extensions: [
StarterKit,
],
})
设置编辑器的读写权限,true可编辑 flase只读
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: [
StarterKit,
],
editable: false, // false 只读 true可编辑
})
设置编辑器是否获取焦点或设置光标的位置
值 | 说明 |
---|---|
start | 设置光标在编辑器文档的最前面 |
end | 设置光标在编辑器文档的最后面 |
all | 选中全部文档 |
Number | 比如设置2,那么光标在文档的第二个字符后面 |
true | 编辑器获得焦点,光标位置为默认位置 |
false | 编辑器不获取焦点 |
null | 编辑器不获取焦点 |
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: [
StarterKit,
],
autofocus: false,
})
// vue3 例子
const state = reactive({
editor: new Editor({
content: "<p>Tiptap 中文文档 www.itxst.com</p>",
extensions: [
StarterKit,
TextStyle,
Color.configure({
types: ["textStyle"],
}),
],
autofocus: true, // 设置获取焦点
editable: true,
}) as any,
});
默认情况下开启所有输入规则,你可以通过enableInputRules自定义输入规则,比如输入网址自动加上链接、输入数字自动加下划线。
// vue3 输入数字自动加下划线的例子
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Strike from '@tiptap/extension-strike'
import { markInputRule } from '@tiptap/core'
//我们自定义了Strike扩展的输入规则,输入数字时自动加上下划线
const inputRegex = /^[0-9]+$/
const CustomStrike = Strike.extend({
addInputRules() {
return [
markInputRule({
find: inputRegex,
type: this.type,
}),
]
},
})
const state = reactive({
editor: new Editor({
content: "<p>Tiptap 中文文档,回车输入数字看看效果</p>",
extensions: [
StarterKit,
CustomStrike,
],
//默认是允许所有的输入规则,下面设置只允许 CustomStrike
enableInputRules: [CustomStrike],
}) as any,
result: "",
});
默认情况下开启所有粘贴规则,你可以通过enablePasteRules自定义粘贴规则。
// 禁用全部粘贴规则
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: [
StarterKit,
],
enablePasteRules: false,
})
指定某个扩展开启粘贴规则
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
new Editor({
content: `<p>Example Text</p>`,
extensions: [
StarterKit,
Link,
],
// pass an array of extensions or extension names
// to allow only specific paste rules
enablePasteRules: [Link, 'horizontalRule'],
})
注入默认的样式,你可以设置false禁止注入默认样式
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: [
StarterKit,
],
injectCSS: false,
})
将内容安全策略与nonce一起使用时,运行以下是一个示例,按浏览器F12你会在网页的head里面看到动态插入的noce。
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: [
StarterKit,
],
injectCSS: true,
injectNonce: "your-nonce-here"
})
高级用法,传递给ProseMirror覆盖编辑器的dom属性事件
new Editor({
// 更多资料: https://prosemirror.net/docs/ref/#view.EditorProps
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
},
transformPastedText(text) {
return text.toUpperCase()
}
}
})
您可以传递parseOptions,然后由ProseMirror处理。
new Editor({
// Learn more: https://prosemirror.net/docs/ref/#model.ParseOptions
parseOptions: {
preserveWhitespace: 'full',
},
})