mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 17:43:49 +08:00
Code Issues Actions 4 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>
<div v-if="editor">
<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>
<editor-content :editor="editor" />
@ -36,9 +42,9 @@ export default {
],
content: `
<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>
<p>Albert Einstein</p>
<p>Audrey Hepburn</p>
`,
})
},
@ -58,7 +64,7 @@ export default {
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
border-left: 3px solid rgba(#0D0D0D, 0.1);
}
}
</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)
[![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.
@ -16,18 +16,44 @@ yarn add @tiptap/extension-blockquote
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
Blockquote.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
## Commands
| Command | Parameters | Description |
| ---------- | ---------- | ----------------------------- |
| blockquote | — | Wrap content in a blockquote. |
### setBlockquote()
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
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`B`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`B`
| Action | Windows/Linux | macOS |
| ----------------- | ------------------------------- | --------------------------- |
| Toggle Blockquote | `Control`&nbsp;`Shift`&nbsp;`B` | `Cmd`&nbsp;`Shift`&nbsp;`B` |
## Source code
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/)