mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
add bold commands
This commit is contained in:
parent
0354f02842
commit
3349ebf081
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -7,7 +7,7 @@
|
||||
<button class="button" @click="clearContent">
|
||||
Clear Content
|
||||
</button>
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
Bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -10,7 +10,7 @@
|
||||
<button @click="editor.chain().focus().redo().run()">
|
||||
redo
|
||||
</button>
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
</button>
|
||||
|
||||
|
@ -14,7 +14,7 @@ const MenuBar = () => {
|
||||
</button>
|
||||
<button
|
||||
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
|
||||
onClick={() => editor.chain().focus().bold().run()}
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
Bold
|
||||
</button>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': editor.isActive('bold') }"
|
||||
@click="editor.chain().focus().bold().run()"
|
||||
@click="editor.chain().focus().toggleBold().run()"
|
||||
>
|
||||
Bold
|
||||
</button>
|
||||
|
@ -9,7 +9,7 @@ The editor provides a ton of commands to programmtically add or change content o
|
||||
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.commands.bold()
|
||||
editor.commands.toggleBold()
|
||||
```
|
||||
|
||||
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.
|
||||
@ -21,7 +21,7 @@ Most commands can be combined to one call. That’s shorter than separate functi
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.bold()
|
||||
.toggleBold()
|
||||
.run()
|
||||
```
|
||||
|
||||
@ -53,7 +53,7 @@ Sometimes, you don’t want to actually run the commands, but only know if it wo
|
||||
```js
|
||||
editor
|
||||
.can()
|
||||
.bold()
|
||||
.toggleBold()
|
||||
```
|
||||
|
||||
And you can use it together with `.chain()`, too. Here is an example which checks if it’s possible to apply all the commands:
|
||||
@ -62,7 +62,7 @@ And you can use it together with `.chain()`, too. Here is an example which check
|
||||
editor
|
||||
.can()
|
||||
.chain()
|
||||
.bold()
|
||||
.toggleBold()
|
||||
.italic()
|
||||
.run()
|
||||
```
|
||||
|
@ -10,7 +10,7 @@ Let’s start to add your first button to the editor. Once initiated the editor
|
||||
|
||||
<demo name="SimpleMenuBar" highlight="5-11" />
|
||||
|
||||
To mark selected text bold we can use `editor.commands.bold()`. There a ton of other commands and you can even chain them to do multiple things at once.
|
||||
To mark selected text bold we can use `editor.commands.toggleBold()`. There a ton of other commands and you can even chain them to do multiple things at once.
|
||||
|
||||
You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example.
|
||||
|
||||
|
@ -91,7 +91,7 @@ Read more about [all the nifty details building custom extensions](/guide/build-
|
||||
Most commands can be combined to one call now. That’s shorter than separate function calls in most cases. Here is an example to make the selected text bold:
|
||||
|
||||
```js
|
||||
editor.chain().bold().focus().run()
|
||||
editor.chain().toggleBold().focus().run()
|
||||
```
|
||||
|
||||
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Read more about [the new tiptap commands](/api/commands) in our API documentation.
|
||||
@ -102,7 +102,7 @@ We tried to hide the `.focus()` command from you with tiptap 1 and executed that
|
||||
With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
|
||||
|
||||
```js
|
||||
editor.chain().focus().bold().run()
|
||||
editor.chain().focus().toggleBold().run()
|
||||
```
|
||||
|
||||
### Collaborative editing
|
||||
|
@ -42,18 +42,30 @@ const Bold = Mark.create({
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Set a bold mark
|
||||
*/
|
||||
setBold: (): Command => ({ commands }) => {
|
||||
return commands.addMark('bold')
|
||||
},
|
||||
/**
|
||||
* Toggle a bold mark
|
||||
*/
|
||||
bold: (): Command => ({ commands }) => {
|
||||
toggleBold: (): Command => ({ commands }) => {
|
||||
return commands.toggleMark('bold')
|
||||
},
|
||||
/**
|
||||
* Unset a bold mark
|
||||
*/
|
||||
unsetBold: (): Command => ({ commands }) => {
|
||||
return commands.removeMark('bold')
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-b': () => this.editor.commands.bold(),
|
||||
'Mod-b': () => this.editor.commands.toggleBold(),
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user