mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add content to the commands page

Browse Source
This commit is contained in:
Hans Pagel 2020-10-02 16:56:02 +02:00
parent f96dca37d6
commit a03dfaf28d
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/src/docPages/api/commands.md
View File

@ -3,16 +3,31 @@
## Table of Contents
## Introduction
The editor provides a ton of commands to programmtically add or change content or alter the selection. If you want to build your own editor you definitely want to learn more about them.
## Execute a command
All available commands are accessible through an editor instance. Let’s say you want to make text bold when a user clicks on a button. That’s how that would look like:
```js
editor.bold()
```
While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.
## Chain commands
Most commands can be executed combined to one call. First of all, that’s shorter than separate function call in most cases. Here is an example to make the selected text bold:
```js
editor.chain().focus().bold().run()
```
## List of commands
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Between those two functions, this example combines to different commands.
### Content
When a user clicks on a button outside of the content, the editor isn’t in focus anymore. That’s why you probably want to add a `.focus()` call to most of your commands, that brings back the focus to the editor and the user can continue to type.
All chained commands are kind of queued up. They are combined to one single transaction. That means, the content is only updated once, also the `update` event is only triggered once.
## Content
| Command | Description |
| --------------- | ----------------------------------------------------------- |
| .clearContent() | Clear the whole document. |
@ -20,7 +35,7 @@ editor.chain().focus().bold().run()
| .insertText() | Insert a string of text at the currently selected position. |
| .setContent() | Replace the whole document with new content. |
### Nodes & Marks
## Nodes & Marks
| Command | Description |
| ------------------- | ------------------------------------------------------ |
| .removeMark() | Remove a mark in the current selection. |
@ -31,7 +46,7 @@ editor.chain().focus().bold().run()
| .setBlockType() | Replace a given range with a node. |
| .updateMark() | Update a mark with new attributes. |
### Lists
## Lists
| Command | Description |
| ------------------- | ------------------------------------------------------ |
| .liftListItem() | Lift the list item into a wrapping list. |
@ -39,7 +54,7 @@ editor.chain().focus().bold().run()
| .splitListItem() | Splits a textblock of a list item into two list items. |
| .toggleList() | Toggle between different list styles. |
### Selection
## Selection
| Command | Description |
| ------------------ | --------------------------------------- |
| .blur() | Blurs the editor. |
@ -47,3 +62,6 @@ editor.chain().focus().bold().run()
| .focus() | Focus the editor at the given position. |
| .scrollIntoView() | Scroll the selection into view. |
| .selectAll() | Select the whole document. |
## Extensions
All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions) to learn more about that. Of course, you can [add your custom extensions](/guide/custom-extensions) with custom commands aswell.