tiptap Superscript 上标扩展,和html的sup标签和内联样式的vertical-align: super有相同的效果。
npm install @tiptap/extension-superscript
HTMLAttributes 自定义标签对应的HTML属性。
Superscript.configure({
HTMLAttributes: {
class: 'custom-class',
},
})
setSuperscript 标记选中文本为上标。
editor.commands.setSuperscript()
toggleSuperscript 切换上标。
editor.commands.toggleSuperscript()
unsetSuperscript 移除选中文本上标。
editor.commands.unsetSuperscript()
Command | Windows/Linux | macOS |
---|---|---|
toggleSuperscript() | Control . | Cmd . |
Vue 例子
React 例子
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
toggleSuperscript
</button>
<button @click="editor.chain().focus().setSuperscript().run()" :disabled="editor.isActive('superscript')">
setSuperscript
</button>
<button @click="editor.chain().focus().unsetSuperscript().run()" :disabled="!editor.isActive('superscript')">
unsetSuperscript
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Superscript from '@tiptap/extension-superscript'
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,
Superscript,
],
content: `
<p>This is regular text.</p>
<p><sup>This is superscript.</sup></p>
<p><span style="vertical-align: super">And this.</span></p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Superscript from '@tiptap/extension-superscript'
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, Superscript],
content: `
<p>This is regular text.</p>
<p><sup>This is superscript.</sup></p>
<p><span style="vertical-align: super">And this.</span></p>
`,
})
if (!editor) {
return null
}
return (
<>
<button
onClick={() => editor.chain().focus().toggleSuperscript().run()}
className={editor.isActive('superscript') ? 'is-active' : ''}
>
toggleSuperscript
</button>
<button
onClick={() => editor.chain().focus().setSuperscript().run()}
disabled={editor.isActive('superscript')}
>
setSuperscript
</button>
<button
onClick={() => editor.chain().focus().unsetSuperscript().run()}
disabled={!editor.isActive('superscript')}
>
unsetSuperscript
</button>
<EditorContent editor={editor} />
</>
)
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。