Tiptap Typography 特殊符号

Tiptap Typography 排版你可以理解成输入某些字符后转换成特殊的字符，比如输入(c)会自动转换成©

Install 安装

npm install @tiptap/extension-typography

Rules 规则

types 应用到哪个mark标记上。

Name	Description
emDash	Converts double dashes `--` to an emdash `—`.
ellipsis	Converts three dots `...` to an ellipsis character `…`
openDoubleQuote	`“`Smart” opening double quotes.
closeDoubleQuote	“Smart`”` closing double quotes.
openSingleQuote	`‘`Smart’ opening single quotes.
closeSingleQuote	‘Smart`’` closing single quotes.
leftArrow	Converts `<‐` to an arrow `←` .
rightArrow	Converts `‐>` to an arrow `→`.
copyright	Converts `(c)` to a copyright sign `©`.
registeredTrademark	Converts `(r)` to registered trademark sign `®`.
trademark	Converts `(tm)` to registered trademark sign `™`.
servicemark	Converts `(sm)` to registered trademark sign `℠`.
oneHalf	Converts `1/2` to one half `½`.
oneQuarter	Converts `1/4` to one quarter `¼`.
threeQuarters	Converts `3/4` to three quarters `¾`.
plusMinus	Converts `+/-` to plus/minus sign `±`.
notEqual	Converts `!=` to a not equal sign `≠`.
laquo	Converts `<<` to left-pointing double angle quotation mark `«`.
raquo	Converts `>>` to right-pointing double angle quotation mark `»`.
multiplication	Converts `2 * 3` or `2x3` to a multiplcation sign `2×3`.
superscriptTwo	Converts `^2` a superscript two `²`.
superscriptThree	Converts `^3` a superscript three `³`.

源代码

typography 源代码

在线例子

vue 在线例子

typography 例子

Vue 例子
React 例子

<template>
  <editor-content :editor="editor" />
</template>
<script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Typography from '@tiptap/extension-typography'
import { Editor, EditorContent } from '@tiptap/vue-3'

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
        Typography,
      ],
      content: `
        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
        <p>— Erik Spiekermann, December 2008</p>
      `,
    })
  },
  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Typography from '@tiptap/extension-typography'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

export default () => {
  const editor = useEditor({
    extensions: [Document, Paragraph, Text, Typography],
    content: `
        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
        <p>— Erik Spiekermann, December 2008</p>
      `,
  })
  return <EditorContent editor={editor} />
}

下载教程 Demo

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