mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 22:36:14 +08:00
add old extensions list
This commit is contained in:
Hans Pagel
parent
25fb966c7c
commit
dd94d98a9b
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user