add old extensions list
This commit is contained in:
Hans Pagel
@@ -1 +1,917 @@
|
|||||||
# Extensions
|
# Extensions
|
||||||
|
|
||||||
|
> ⚠️ TODO: This is old content.
|
||||||
|
|
||||||
|
By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. You must
|
||||||
|
install `tiptap-extensions` package separately so that you can use basic Nodes, Marks, or Plugins. An extension is
|
||||||
|
usually tied to a [Command](../commands/basics.md). The official set of commands are part of the
|
||||||
|
[`tiptap-commands`][@npmjs-tiptap-commands] package.
|
||||||
|
|
||||||
|
## Blockquote
|
||||||
|
Allows you to use the `<blockquote>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| blockquote | none | Wrap content in a blockquote. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Ctrl->`
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.blockquote() }" @click="commands.blockquote">
|
||||||
|
Blockquote
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Blockquote } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Blockquote(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<blockquote>
|
||||||
|
Life is like riding a bycicle. To keep your balance, you must keep moving.
|
||||||
|
</blockquote>
|
||||||
|
<p>Albert Einstein</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Bold
|
||||||
|
Renders text in **bold** text weight. If you pass `<strong>`, or `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor's initial content, they will be rendered accordingly.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked as bold, regardless of method will be normalized to `<strong>` HTML tags.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| bold | none | Mark text as bold. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Ctrl-b` (on Windows/Linux)
|
||||||
|
`Cmd-b` (on macOS)
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
|
||||||
|
Bold
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Bold } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Bold(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p><strong>This is strong</strong></p>
|
||||||
|
<p><b>And this</b></p>
|
||||||
|
<p style="font-weight: bold">This as well</p>
|
||||||
|
<p style="font-weight: bolder">Oh! and this</p>
|
||||||
|
<p style="font-weight: 500">Cool! Right!?</p>
|
||||||
|
<p style="font-weight: 999">Up to 999!!!</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## BulletList
|
||||||
|
Allows you to use the `<ul>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `ListItem` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| bullet_list | none | Toggle a bullet list. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Shift-Ctrl-8`
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list">
|
||||||
|
Bullet List
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { BulletList } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new BulletList(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<ul>
|
||||||
|
<li>A list item</li>
|
||||||
|
<li>And another one</li>
|
||||||
|
</ul>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Code
|
||||||
|
Allows you to use the `<code>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| code | none | Mark text as code. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Mod-``
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.code() }" @click="commands.code">
|
||||||
|
Code
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Code } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Code(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p>This is some <code>inline code.</code></p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## CodeBlock
|
||||||
|
Allows you to use the `<pre>` HTML tag in the editor.
|
||||||
|
|
||||||
|
## CodeBlockHighlight
|
||||||
|
Allows you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
|
||||||
|
|
||||||
|
## Collaboration
|
||||||
|
Allows you to collaborate with others on one document.
|
||||||
|
|
||||||
|
## HardBreak
|
||||||
|
Allows you to use the `<br>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Mod-Enter`, `Shift-Enter`
|
||||||
|
|
||||||
|
## Heading
|
||||||
|
Allows you to use the headline HTML tags in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
| option | type | default | description |
|
||||||
|
| ------ | ---- | ---- | ----- |
|
||||||
|
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are to be supported. |
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| heading | level | Creates a heading node. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Shift-Ctrl-1` → H1
|
||||||
|
`Shift-Ctrl-2` → H2
|
||||||
|
`Shift-Ctrl-3` → H3
|
||||||
|
`Shift-Ctrl-4` → H4
|
||||||
|
`Shift-Ctrl-5` → H5
|
||||||
|
`Shift-Ctrl-6` → H6
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<div>
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1})">
|
||||||
|
H1
|
||||||
|
</button>
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
|
||||||
|
H2
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Heading } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Heading({
|
||||||
|
levels: [1, 2],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<h1>This is a headline level 1</h1>
|
||||||
|
<h2>This is a headline level 2</h2>
|
||||||
|
<h3>This headline will be converted to a paragraph, because it's not defined in the levels option.</h3>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## History
|
||||||
|
Enables history support.
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| undo | none | Undo the latest change. |
|
||||||
|
| redo | none | Redo the latest change. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Mod-z` → Undo
|
||||||
|
`Shift-Mod-z` → Redo
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<div>
|
||||||
|
<button type="button" @click="commands.undo">
|
||||||
|
Undo
|
||||||
|
</button>
|
||||||
|
<button type="button" @click="commands.redo">
|
||||||
|
Redo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { History } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new History(),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## HorizontalRule
|
||||||
|
Allows you to use the `<hr>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| horizontal_rule | none | Create a horizontal rule. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" @click="commands.horizontal_rule">
|
||||||
|
Horizontal Rule
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { HorizontalRule } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new HorizontalRule(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p>Some text.</p>
|
||||||
|
<hr />
|
||||||
|
<p>Text again.</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Italic
|
||||||
|
Allows you to use the `<em>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| italic | none | Mark text as italic. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Ctrl-i` (on Windows/Linux)
|
||||||
|
`Cmd-i` (on macOS)
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.italic() }" @click="commands.italic">
|
||||||
|
Italic
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Italic } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Italic(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p><em>This is italic</em></p>
|
||||||
|
<p><i>And this</i></p>
|
||||||
|
<p style="font-style: italic">This as well</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Link
|
||||||
|
Allows you to use the `<a>` HTML tag in the editor.
|
||||||
|
#### Options
|
||||||
|
| option | type | default | description |
|
||||||
|
| ------ | ---- | ---- | ----- |
|
||||||
|
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
|
||||||
|
|
||||||
|
## ListItem
|
||||||
|
Allows you to use the `<li>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Mention
|
||||||
|
Allows you to use mentions in the editor.
|
||||||
|
|
||||||
|
## OrderedList
|
||||||
|
Allows you to use the `<ol>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `ListItem` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| ordered_list | none | Toggle an ordered list. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Shift-Ctrl-9`
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list">
|
||||||
|
Ordered List
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { OrderedList } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new OrderedList(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<ol>
|
||||||
|
<li>A list item</li>
|
||||||
|
<li>And another one</li>
|
||||||
|
</ol>
|
||||||
|
<ol start="3">
|
||||||
|
<li>This list begins with 3.</li>
|
||||||
|
</ol>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Placeholder
|
||||||
|
Allows you to show placeholders on empty paragraphs.
|
||||||
|
|
||||||
|
## Table
|
||||||
|
This enables support for tables in your editor.
|
||||||
|
Tables can be nested and allow all blocks to be used inside.
|
||||||
|
Each `<TableCell>` includes a single `<Paragraph>`.
|
||||||
|
|
||||||
|
#### Options <Badge text="1.19.3"/>
|
||||||
|
| option | type | default | description |
|
||||||
|
| ------ | ---- | ---- | ----- |
|
||||||
|
| resizable | Boolean | false | Enables the resizing of columns |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Tab` → Next Cell
|
||||||
|
`Shift-Tab` → Previous Cell
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| createTable | ```{ rowsCount, colsCount, withHeaderRow }``` | Returns a table node of a given size. `withHeaderRow` defines whether the first row of the table will be a header row. |
|
||||||
|
| deleteTable | none | Deletes the complete table which is active |
|
||||||
|
| addColumnBefore | none | Add a column before the selection. |
|
||||||
|
| addColumnAfter | none | Add a column after the selection. |
|
||||||
|
| deleteColumn | none | Removes the selected columns. |
|
||||||
|
| addRowBefore | none | Add a table row before the selection. |
|
||||||
|
| addRowAfter | none | Add a table row after the selection. |
|
||||||
|
| toggleCellMerge | none | See mergeCells and splitCells |
|
||||||
|
| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
|
||||||
|
| splitCell | none | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
|
||||||
|
| toggleHeaderColumn | none | Toggles whether the selected column contains header cells. |
|
||||||
|
| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
|
||||||
|
| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
|
||||||
|
| setCellAttr | none | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
|
||||||
|
| fixTables | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
::: warning
|
||||||
|
You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow`)
|
||||||
|
:::
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button :class="{ 'is-active': isActive.bold() }" @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })">
|
||||||
|
Create Table
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Table, TableCell, TableHeader, TableRow } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Table(),
|
||||||
|
new TableCell(),
|
||||||
|
new TableHeader(),
|
||||||
|
new TableRow(),
|
||||||
|
],
|
||||||
|
content: ''
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## TableHeader
|
||||||
|
Allows you to use the `<th>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `Table` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## TableCell
|
||||||
|
Allows you to use the `<td>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `Table` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## TableRow
|
||||||
|
Allows you to use the `<tr>` HTML tag in the editor.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `Table` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## TodoItem
|
||||||
|
It renders a single toggleable item of a list.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `TodoList` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
| option | type | default | description |
|
||||||
|
| ------ | ---- | ---- | ----- |
|
||||||
|
| nested | Boolean | false | Specifies if you can nest todo lists. |
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
*None*
|
||||||
|
|
||||||
|
## TodoList
|
||||||
|
Renders a toggleable list of items.
|
||||||
|
|
||||||
|
::: warning Restrictions
|
||||||
|
This extensions is intended to be used with the `TodoItem` extension.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| todo_list | none | Toggle todo list. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
|
||||||
|
Todo List
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { TodoItem, TodoList } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new TodoItem({
|
||||||
|
nested: true,
|
||||||
|
}),
|
||||||
|
new TodoList(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<ul data-type="todo_list">
|
||||||
|
<li data-type="todo_item" data-done="true">
|
||||||
|
Checked item
|
||||||
|
</li>
|
||||||
|
<li data-type="todo_item" data-done="false">
|
||||||
|
Unchecked item
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Strike
|
||||||
|
Allows you to use the `<s>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| strike | none | Mark text as strikethrough. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Ctrl-d` (on Windows/Linux)
|
||||||
|
`Cmd-d` (on macOS)
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.strike() }" @click="commands.strike">
|
||||||
|
Strike
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Strike } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Strike(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p><s>That's strikethrough.</s></p>
|
||||||
|
<p><del>This too.</del></p>
|
||||||
|
<p><strike>And this.</strike></p>
|
||||||
|
<p style="text-decoration: line-through">This as well.</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Underline
|
||||||
|
Allows you to use the `<u>` HTML tag in the editor.
|
||||||
|
|
||||||
|
#### Options
|
||||||
|
*None*
|
||||||
|
|
||||||
|
#### Commands
|
||||||
|
| command | options | description |
|
||||||
|
| ------ | ---- | ---------------- |
|
||||||
|
| underline | none | Mark text as underlined. |
|
||||||
|
|
||||||
|
#### Keybindings
|
||||||
|
`Ctrl-u` (on Windows/Linux)
|
||||||
|
`Cmd-u` (on macOS)
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||||
|
<button type="button" :class="{ 'is-active': isActive.underline() }" @click="commands.underline">
|
||||||
|
Underline
|
||||||
|
</button>
|
||||||
|
</editor-menu-bar>
|
||||||
|
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||||
|
import { Underline } from 'tiptap-extensions'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorMenuBar,
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: new Editor({
|
||||||
|
extensions: [
|
||||||
|
new Underline(),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<p><u>This is underlined.</u></p>
|
||||||
|
<p style="text-decoration: underline">This as well.</p>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
[@tiptap-contrib]: https://github.com/ueberdosis/tiptap/blob/master/CONTRIBUTING.md
|
||||||
|
[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands
|
||||||
|
|||||||
Reference in New Issue
Block a user