minor improvements
This commit is contained in:
@@ -1,7 +1,16 @@
|
|||||||
# Blockquote
|
# Blockquote
|
||||||
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor.
|
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor.
|
||||||
|
|
||||||
Type `> ` at the beginning of a new line and it will be magically transformed to a blockquote.
|
Type `> ` at the beginning of a new line and it will magically transform to a blockquote.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/extension-blockquote
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/extension-blockquote
|
||||||
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
@@ -17,7 +26,7 @@ Type `> ` at the beginning of a new line and it will be magically transformed
|
|||||||
* Windows & Linux: `Control` + `Shift` + `9`
|
* Windows & Linux: `Control` + `Shift` + `9`
|
||||||
* macOS: `Command` + `Shift` + `9`
|
* macOS: `Command` + `Shift` + `9`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
|
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Bold
|
# Bold
|
||||||
Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly.
|
Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly.
|
||||||
|
|
||||||
Type `**two asterisks**` or `__two underlines__` and it will be magically transformed to **bold** text while you type.
|
Type `**two asterisks**` or `__two underlines__` and it will magically transform to **bold** text while you type.
|
||||||
|
|
||||||
::: warning Restrictions
|
::: warning Restrictions
|
||||||
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
|
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
|
||||||
@@ -21,7 +21,7 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
|
|||||||
* Windows & Linux: `Control` + `B`
|
* Windows & Linux: `Control` + `B`
|
||||||
* macOS: `Command` + `B`
|
* macOS: `Command` + `B`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
|
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# BulletList
|
# BulletList
|
||||||
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
|
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
|
||||||
|
|
||||||
Type `* `, `- ` or `+ ` at the beginning of a new line and it will be magically transformed to a bullet list.
|
Type `* `, `- ` or `+ ` at the beginning of a new line and it will magically transform to a bullet list.
|
||||||
|
|
||||||
::: warning Use with ListItem
|
::: warning Use with ListItem
|
||||||
The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
|
The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
|
||||||
@@ -20,7 +20,7 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext
|
|||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
* `Control` + `Shift` + `8`
|
* `Control` + `Shift` + `8`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
|
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
|
|||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
* `Shift` + `Control` + `\`
|
* `Shift` + `Control` + `\`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
|
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Code
|
# Code
|
||||||
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
||||||
|
|
||||||
Type something with \`back-ticks around\` and it will be magically transformed to `inline code` while you type.
|
Type something with \`back-ticks around\` and it will magically transform to `inline code` while you type.
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
@@ -16,7 +16,7 @@ Type something with \`back-ticks around\` and it will be magically transformed t
|
|||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
* `Alt` + `
|
* `Alt` + `
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
|
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ The node is very tiny though. It defines a name of the node (`document`), is con
|
|||||||
Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
|
|||||||
* Windows & Linux: `Control` + `Enter`
|
* Windows & Linux: `Control` + `Enter`
|
||||||
* macOS: `Command` + `Enter`
|
* macOS: `Command` + `Enter`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
|
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# Heading
|
# Heading
|
||||||
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
|
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
|
||||||
|
|
||||||
Type `# ` at the beginning of a new line and it will be magically transformed to a headline, same for `## `, `### `, `#### `, `##### ` and `###### `.
|
Type `# ` at the beginning of a new line and it will magically transform to a headline, same for `## `, `### `, `#### `, `##### ` and `###### `.
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
@@ -22,7 +22,7 @@ Type `# ` at the beginning of a new line and it will be magically transformed
|
|||||||
* `Control` + `Shift` + `5` → H5
|
* `Control` + `Shift` + `5` → H5
|
||||||
* `Control` + `Shift` + `6` → H6
|
* `Control` + `Shift` + `6` → H6
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
|
[packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ This extension provides history support. All changes to the document will be tra
|
|||||||
* Windows & Linux: `Shift` + `Control` + `Z`
|
* Windows & Linux: `Shift` + `Control` + `Z`
|
||||||
* macOS: `Shift` + `Command` + `Z`
|
* macOS: `Shift` + `Command` + `Z`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-history/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)
|
[packages/extension-history/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# HorizontalRule
|
# HorizontalRule
|
||||||
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
|
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
|
||||||
|
|
||||||
Type three dashes (`---`) or three underscores and a space (`___ `) at the beginning of a new line and it will be magically transformed to a horizontal rule.
|
Type three dashes (`---`) or three underscores and a space (`___ `) at the beginning of a new line and it will magically transform to a horizontal rule.
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
@@ -16,7 +16,7 @@ Type three dashes (`---`) or three underscores and a space (`___ `) at the be
|
|||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
*None*
|
*None*
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
|
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
|
|||||||
* Windows & Linux: `Control` + `I`
|
* Windows & Linux: `Control` + `I`
|
||||||
* macOS: `Command` + `I`
|
* macOS: `Command` + `I`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
|
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ Yes, the schema is very strict. Without this extension you won’t even be able
|
|||||||
## Keyboard shortcuts
|
## Keyboard shortcuts
|
||||||
*None*
|
*None*
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
|
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
|
|||||||
* Windows & Linux: `Control` + `D`
|
* Windows & Linux: `Control` + `D`
|
||||||
* macOS: `Command` + `D`
|
* macOS: `Command` + `D`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
|
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
Tiptap 1 tried to hide that node from you, but it has always been there.
|
Tiptap 1 tried to hide that node from you, but it has always been there.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
|
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
|
|||||||
* Windows & Linux: `Control` + `U`
|
* Windows & Linux: `Control` + `U`
|
||||||
* macOS: `Command` + `U`
|
* macOS: `Command` + `U`
|
||||||
|
|
||||||
## Source Code
|
## Source code
|
||||||
[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
|
[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -1,6 +1,28 @@
|
|||||||
# Installation
|
# Installation
|
||||||
|
|
||||||
tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
|
tiptap has a modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
|
||||||
|
|
||||||
|
## Vue.js
|
||||||
|
|
||||||
|
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
|
||||||
|
|
||||||
|
# Or: With Yarn
|
||||||
|
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
|
||||||
|
```
|
||||||
|
|
||||||
|
| Package | Description |
|
||||||
|
| -------------------------------------------------------------------------------- | ----------------------------------- |
|
||||||
|
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
|
||||||
|
| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js |
|
||||||
|
| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | Installs the most common extensions |
|
||||||
|
|
||||||
|
Create a new component and add the following content to get a basic version of tiptap:
|
||||||
|
|
||||||
|
<demo name="General/Installation" />
|
||||||
|
|
||||||
## Plain JavaScript
|
## Plain JavaScript
|
||||||
|
|
||||||
@@ -27,22 +49,6 @@ new Editor({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## Vue.js
|
|
||||||
|
|
||||||
To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# With npm
|
|
||||||
npm install @tiptap/vue @tiptap/vue-starter-kit
|
|
||||||
|
|
||||||
# Or: With Yarn
|
|
||||||
yarn add @tiptap/vue @tiptap/vue-starter-kit
|
|
||||||
```
|
|
||||||
|
|
||||||
We even prepared a Vue.js starter kit for you. That should give you a good headstart. Create a new component and add the following content to get a basic version of tiptap:
|
|
||||||
|
|
||||||
<demo name="General/Installation" />
|
|
||||||
|
|
||||||
## CodeSandbox
|
## CodeSandbox
|
||||||
|
|
||||||
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and it’s great to share your code with others.
|
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and it’s great to share your code with others.
|
||||||
|
|||||||
Reference in New Issue
Block a user