mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-11 20:23:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: update the blockquote page

Browse Source
This commit is contained in:
Hans Pagel 2021-10-01 22:45:12 +02:00
parent ab21b304e0
commit 6863626a7a
2 changed files with 45 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demos/src/Nodes/Blockquote/Vue/index.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }"> <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote toggleBlockquote
</button>
<button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
setBlockquote
</button>
<button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
unsetBlockquote
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@ -36,9 +42,9 @@ export default {
], ],
content: ` content: `
<blockquote> <blockquote>
Life is like riding a bycicle. To keep your balance, you must keep moving. Nothing is impossible, the word itself says “I’m possible!”
</blockquote> </blockquote>
<p>Albert Einstein</p> <p>Audrey Hepburn</p>
`, `,
}) })
}, },
@ -58,7 +64,7 @@ export default {
blockquote { blockquote {
padding-left: 1rem; padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1); border-left: 3px solid rgba(#0D0D0D, 0.1);
} }
} }
</style> </style>

44
docs/api/nodes/blockquote.md
View File

@ -2,7 +2,7 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-blockquote.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-blockquote) [![Version](https://img.shields.io/npm/v/@tiptap/extension-blockquote.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-blockquote)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-blockquote.svg)](https://npmcharts.com/compare/@tiptap/extension-blockquote?minimal=true) [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-blockquote.svg)](https://npmcharts.com/compare/@tiptap/extension-blockquote?minimal=true)
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great to use quotes in the editor. The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great to … show quotes in the editor, you know?
Type <code>>&nbsp;</code> at the beginning of a new line and it will magically transform to a blockquote. Type <code>>&nbsp;</code> at the beginning of a new line and it will magically transform to a blockquote.
@ -16,18 +16,44 @@ yarn add @tiptap/extension-blockquote
``` ```
## Settings ## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- | ### HTMLAttributes
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. | Custom HTML attributes that should be added to the rendered HTML tag.
```js
Blockquote.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
## Commands ## Commands
| Command | Parameters | Description | ### setBlockquote()
| ---------- | ---------- | ----------------------------- | Wrap content in a blockquote.
| blockquote | — | Wrap content in a blockquote. |
```js
editor.commands.setBlockquote()
```
### toggleBlockquote()
Wrap or unwrap a blockquote.
```js
editor.commands.toggleBlockquote()
```
### unsetBlockquote()
Unwrap a blockquote.
```js
editor.commands.unsetBlockquote()
```
## Keyboard shortcuts ## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`B` | Action | Windows/Linux | macOS |
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`B` | ----------------- | ------------------------------- | --------------------------- |
| Toggle Blockquote | `Control`&nbsp;`Shift`&nbsp;`B` | `Cmd`&nbsp;`Shift`&nbsp;`B` |
## Source code ## Source code
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/) [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/)