mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-13 01:19:01 +08:00
89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
---
|
||
description: Left, right, center, whatever! Align the text however you like.
|
||
---
|
||
|
||
# TextAlign
|
||
[](https://www.npmjs.com/package/@tiptap/extension-text-align)
|
||
[](https://npmcharts.com/compare/@tiptap/extension-text-align?minimal=true)
|
||
|
||
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
|
||
|
||
:::warning Firefox bug
|
||
`text-align: justify` doesn't work together with `white-space: pre-wrap` in Firefox, [that’s a known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1253840).
|
||
:::
|
||
|
||
## Installation
|
||
```bash
|
||
# with npm
|
||
npm install @tiptap/extension-text-align
|
||
|
||
# with Yarn
|
||
yarn add @tiptap/extension-text-align
|
||
```
|
||
|
||
## Settings
|
||
|
||
### types
|
||
A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']`.
|
||
|
||
Default: `[]`
|
||
|
||
```js
|
||
TextAlign.configure({
|
||
types: ['heading', 'paragraph'],
|
||
})
|
||
```
|
||
|
||
### alignments
|
||
A list of available options for the text align attribute.
|
||
|
||
Default: `['left', 'center', 'right', 'justify']`
|
||
|
||
```js
|
||
TextAlign.configure({
|
||
alignments: ['left', 'right'],
|
||
})
|
||
```
|
||
|
||
### defaultAlignment
|
||
The default text align.
|
||
|
||
Default: `'left'`
|
||
|
||
```js
|
||
TextAlign.configure({
|
||
defaultAlignment: 'right',
|
||
})
|
||
```
|
||
|
||
|
||
## Commands
|
||
|
||
### setTextAlign()
|
||
Set the text align to the specified value.
|
||
|
||
```js
|
||
editor.commands.setTextAlign('right')
|
||
```
|
||
|
||
### unsetTextAlign()
|
||
Remove the text align value.
|
||
|
||
```js
|
||
editor.commands.unsetTextAlign()
|
||
```
|
||
|
||
## Keyboard shortcuts
|
||
| Command | Windows/Linux | macOS |
|
||
| ----------------------- | ---------------------------- | --------------------------- |
|
||
| setTextAlign('left') | `Ctrl` `Shift` `L` | `Cmd` `Shift` `L` |
|
||
| setTextAlign('center') | `Ctrl` `Shift` `E` | `Cmd` `Shift` `E` |
|
||
| setTextAlign('right') | `Ctrl` `Shift` `R` | `Cmd` `Shift` `R` |
|
||
| setTextAlign('justify') | `Ctrl` `Shift` `J` | `Cmd` `Shift` `J` |
|
||
|
||
## Source code
|
||
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/)
|
||
|
||
## Usage
|
||
<tiptap-demo name="Extensions/TextAlign"></tiptap-demo>
|