tiptap TextStyle 标记呈现为 span 标签,您能够添加样式相关的属性,例如font-family、font-size或color,默认情况下,扩展不添加任何样式属性,但其他扩展以它作为基础,例如FontFamily或Color扩展。
npm install @tiptap/extension-text-style
removeEmptyTextStyle 移除样式。
editor.commands.removeEmptyTextStyle()
Vue 例子
React 例子
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
</template>
<script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'
import { Editor, EditorContent } from '@tiptap/vue-3'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
TextStyle,
],
content: `
<p><span>This has a <span> tag without a style attribute, so it’s thrown away.</span></p>
<p><span style="">But this one is wrapped in a <span> tag with an inline style attribute, so it’s kept - even if it’s empty for now.</span></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 TextStyle from '@tiptap/extension-text-style'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, TextStyle],
content: `
<p><span>This has a <span> tag without a style attribute, so it’s thrown away.</span></p>
<p><span style="">But this one is wrapped in a <span> tag with an inline style attribute, so it’s kept - even if it’s empty for now.</span></p>
`,
})
if (!editor) {
return null
}
return <EditorContent editor={editor} />
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。