add content to the commands page
This commit is contained in:
@@ -3,16 +3,31 @@
|
|||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
## Introduction
|
## 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
|
## 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
|
```js
|
||||||
editor.chain().focus().bold().run()
|
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 |
|
| Command | Description |
|
||||||
| --------------- | ----------------------------------------------------------- |
|
| --------------- | ----------------------------------------------------------- |
|
||||||
| .clearContent() | Clear the whole document. |
|
| .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. |
|
| .insertText() | Insert a string of text at the currently selected position. |
|
||||||
| .setContent() | Replace the whole document with new content. |
|
| .setContent() | Replace the whole document with new content. |
|
||||||
|
|
||||||
### Nodes & Marks
|
## Nodes & Marks
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| ------------------- | ------------------------------------------------------ |
|
| ------------------- | ------------------------------------------------------ |
|
||||||
| .removeMark() | Remove a mark in the current selection. |
|
| .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. |
|
| .setBlockType() | Replace a given range with a node. |
|
||||||
| .updateMark() | Update a mark with new attributes. |
|
| .updateMark() | Update a mark with new attributes. |
|
||||||
|
|
||||||
### Lists
|
## Lists
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| ------------------- | ------------------------------------------------------ |
|
| ------------------- | ------------------------------------------------------ |
|
||||||
| .liftListItem() | Lift the list item into a wrapping list. |
|
| .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. |
|
| .splitListItem() | Splits a textblock of a list item into two list items. |
|
||||||
| .toggleList() | Toggle between different list styles. |
|
| .toggleList() | Toggle between different list styles. |
|
||||||
|
|
||||||
### Selection
|
## Selection
|
||||||
| Command | Description |
|
| Command | Description |
|
||||||
| ------------------ | --------------------------------------- |
|
| ------------------ | --------------------------------------- |
|
||||||
| .blur() | Blurs the editor. |
|
| .blur() | Blurs the editor. |
|
||||||
@@ -47,3 +62,6 @@ editor.chain().focus().bold().run()
|
|||||||
| .focus() | Focus the editor at the given position. |
|
| .focus() | Focus the editor at the given position. |
|
||||||
| .scrollIntoView() | Scroll the selection into view. |
|
| .scrollIntoView() | Scroll the selection into view. |
|
||||||
| .selectAll() | Select the whole document. |
|
| .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.
|
||||||
|
|||||||
Reference in New Issue
Block a user