mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
update content
This commit is contained in:
Hans Pagel
parent
eb827d774b
commit
262ff88e59
5
docs/src/demos/Extensions/FontFamily/index.spec.js
Normal file
5
docs/src/demos/Extensions/FontFamily/index.spec.js
Normal file
@ -0,0 +1,5 @@
|
||||
context('/api/extensions/font-family', () => {
|
||||
before(() => {
|
||||
cy.visit('/api/extensions/font-family')
|
||||
})
|
||||
})
|
||||
69
docs/src/demos/Extensions/FontFamily/index.vue
Normal file
69
docs/src/demos/Extensions/FontFamily/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().fontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
|
||||
Inter
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
|
||||
Comic Sans
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
|
||||
serif
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
|
||||
monospace
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
|
||||
cursive
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily().run()">
|
||||
Remove font-family
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
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 FontFamily from '@tiptap/extension-font-family'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
TextStyle(),
|
||||
FontFamily(),
|
||||
],
|
||||
content: `
|
||||
<p><span style="font-family: Inter">Did you know that Inter is a really nice font for interfaces?</span></p>
|
||||
<p><span style="font-family: Comic Sans MS, Comic Sans">It doesn’t look as professional as Comic Sans.</span></p>
|
||||
<p><span style="font-family: serif">Serious people use serif fonts anyway.</span></p>
|
||||
<p><span style="font-family: monospace">The cool kids can apply monospace fonts aswell.</span></p>
|
||||
<p><span style="font-family: cursive">But hopefully we all can agree, that cursive fonts are the best.</span></p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,24 +1,5 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().fontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
|
||||
Inter
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
|
||||
Comic Sans
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
|
||||
serif
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
|
||||
monospace
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
|
||||
cursive
|
||||
</button>
|
||||
<button @click="editor.chain().focus().fontFamily().run()">
|
||||
Remove font-family
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
@ -30,7 +11,6 @@ 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 FontFamily from '@tiptap/extension-font-family'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -50,14 +30,10 @@ export default {
|
||||
Paragraph(),
|
||||
Text(),
|
||||
TextStyle(),
|
||||
FontFamily(),
|
||||
],
|
||||
content: `
|
||||
<p><span style="font-family: Inter">Inter</span></p>
|
||||
<p><span style="font-family: Comic Sans MS, Comic Sans">Comic Sans</span></p>
|
||||
<p><span style="font-family: serif">serif</span></p>
|
||||
<p><span style="font-family: monospace">monospace</span></p>
|
||||
<p><span style="font-family: cursive">cursive</span></p>
|
||||
<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>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# FontFamily
|
||||
This extension enables you to set the font family in the editor.
|
||||
This extension enables you to set the font family in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.
|
||||
|
||||
## Installation
|
||||
::: warning Use with TextStyle
|
||||
@ -15,9 +15,14 @@ yarn add @tiptap/extension-text-style @tiptap/extension-font-family
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ----- | ------------- | --------------------------------------------------------------------- |
|
||||
| types | array | ['textStyle'] | A list of marks where the font family attribute should be applied to. |
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ----- | ------------- | ------------------------------------------------------------------------ |
|
||||
| types | array | ['textStyle'] | A list of marks to which the font family attribute should be applied to. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ---------- | ---------- | --------------------------------------------- |
|
||||
| fontFamily | fontFamily | Applies the given font family as inline style |
|
||||
|
||||
## Source code
|
||||
[packages/extension-font-family/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-font-family/)
|
||||
|
||||
@ -10,6 +10,11 @@ npm install @tiptap/extension-text-style
|
||||
yarn add @tiptap/extension-text-style
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| -------------------- | ---------- | --------------------------------------------- |
|
||||
| removeEmptyTextStyle | – | Remove `<span>` tags without an inline style. |
|
||||
|
||||
## Source code
|
||||
[packages/extension-text-style/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-style/)
|
||||
|
||||
|
||||
@ -354,6 +354,9 @@ const CustomLink = Link.extend({
|
||||
```
|
||||
|
||||
## Start from scratch
|
||||
You can also build your own extensions from scratch with the `createNode()`, `createMark()`, and `createExtension()` functions. Pass an option with your code and configuration.
|
||||
|
||||
And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
|
||||
|
||||
### Create a node
|
||||
```js
|
||||
|
||||
@ -119,7 +119,6 @@
|
||||
link: /api/marks/strike
|
||||
- title: TextStyle
|
||||
link: /api/marks/text-style
|
||||
draft: true
|
||||
- title: Underline
|
||||
link: /api/marks/underline
|
||||
- title: Extensions
|
||||
@ -137,7 +136,6 @@
|
||||
link: /api/extensions/focus
|
||||
- title: FontFamily
|
||||
link: /api/extensions/font-family
|
||||
draft: true
|
||||
- title: Gapcursor
|
||||
link: /api/extensions/gapcursor
|
||||
- title: History
|
||||
@ -152,7 +150,6 @@
|
||||
link: /api/events
|
||||
- title: Schema
|
||||
link: /api/schema
|
||||
new: true
|
||||
- title: Keyboard Shortcuts
|
||||
link: /api/keyboard-shortcuts
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user