titap 配置

本文将讲解如何配置 tiptap 编辑器，其中包括如何初始化、加载配置扩展、样式的配置方法。

element

将来编辑器绑定到制定的元素，可以通过 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)

extensions

你可以将需要将扩展作为列表传递给编辑器。

// 使用默认扩展
new Editor({
  extensions: [
    StarterKit,
  ]
})

// 使用默认扩展和其他扩展
new Editor({
  extensions: [
    StarterKit,
    Document,
    Paragraph,
    Text,
  ]
})

// 使用高亮
new Editor({
  extensions: [
    StarterKit,
    Highlight,
  ],
})

content

设置编辑器的默认内容，可以是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,
  ],
})

editable

设置编辑器的读写权限，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可编辑
})

autofocus

设置编辑器是否获取焦点或设置光标的位置

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

默认情况下开启所有输入规则，你可以通过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

默认情况下开启所有粘贴规则，你可以通过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'],
})

injectCSS

注入默认的样式，你可以设置false禁止注入默认样式

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

new Editor({
  extensions: [
    StarterKit,
  ],
  injectCSS: false,
})

injectNonce

将内容安全策略与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"
})

editorProps

高级用法，传递给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

您可以传递parseOptions，然后由ProseMirror处理。

new Editor({
  // Learn more: https://prosemirror.net/docs/ref/#model.ParseOptions
  parseOptions: {
    preserveWhitespace: 'full',
  },
})

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。