rename some commands
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="editor">
|
<div v-if="editor">
|
||||||
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
|
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||||
link
|
link
|
||||||
</button>
|
</button>
|
||||||
<button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
|
<button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
|
||||||
remove
|
remove
|
||||||
</button>
|
</button>
|
||||||
<editor-content :editor="editor" />
|
<editor-content :editor="editor" />
|
||||||
@@ -52,10 +52,10 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
addLink() {
|
setLink() {
|
||||||
const url = window.prompt('URL')
|
const url = window.prompt('URL')
|
||||||
|
|
||||||
this.editor.chain().focus().addLink({ href: url }).run()
|
this.editor.chain().focus().setLink({ href: url }).run()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="editor">
|
<div v-if="editor">
|
||||||
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
|
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||||
link
|
link
|
||||||
</button>
|
</button>
|
||||||
<button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
|
<button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
|
||||||
remove
|
remove
|
||||||
</button>
|
</button>
|
||||||
<editor-content :editor="editor" />
|
<editor-content :editor="editor" />
|
||||||
@@ -49,10 +49,10 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
addLink() {
|
setLink() {
|
||||||
const url = window.prompt('URL')
|
const url = window.prompt('URL')
|
||||||
|
|
||||||
this.editor.chain().focus().addLink({ href: url }).run()
|
this.editor.chain().focus().setLink({ href: url }).run()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -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:
|
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
|
```js
|
||||||
editor.commands.addBold()
|
editor.commands.setBold()
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|||||||
@@ -46,9 +46,9 @@ const Bold = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add a bold mark
|
* Set a bold mark
|
||||||
*/
|
*/
|
||||||
addBold: (): Command => ({ commands }) => {
|
setBold: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('bold')
|
return commands.addMark('bold')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -58,9 +58,9 @@ const Bold = Mark.create({
|
|||||||
return commands.toggleMark('bold')
|
return commands.toggleMark('bold')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove a bold mark
|
* Unset a bold mark
|
||||||
*/
|
*/
|
||||||
removeBold: (): Command => ({ commands }) => {
|
unsetBold: (): Command => ({ commands }) => {
|
||||||
return commands.removeMark('bold')
|
return commands.removeMark('bold')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,9 +36,9 @@ const Code = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add a code mark
|
* Set a code mark
|
||||||
*/
|
*/
|
||||||
addCode: (): Command => ({ commands }) => {
|
setCode: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('code')
|
return commands.addMark('code')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -48,9 +48,9 @@ const Code = Mark.create({
|
|||||||
return commands.toggleMark('code')
|
return commands.toggleMark('code')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove a code mark
|
* Unset a code mark
|
||||||
*/
|
*/
|
||||||
removeCode: (): Command => ({ commands }) => {
|
unsetCode: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('code')
|
return commands.addMark('code')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,9 +59,9 @@ const Highlight = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add a highlight mark
|
* Set a highlight mark
|
||||||
*/
|
*/
|
||||||
addHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
|
setHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
|
||||||
return commands.addMark('highlight', attributes)
|
return commands.addMark('highlight', attributes)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -71,9 +71,9 @@ const Highlight = Mark.create({
|
|||||||
return commands.toggleMark('highlight', attributes)
|
return commands.toggleMark('highlight', attributes)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove a highlight mark
|
* Unset a highlight mark
|
||||||
*/
|
*/
|
||||||
removeHighlight: (): Command => ({ commands }) => {
|
unsetHighlight: (): Command => ({ commands }) => {
|
||||||
return commands.removeMark('highlight')
|
return commands.removeMark('highlight')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -45,9 +45,9 @@ const Italic = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add an italic mark
|
* Set an italic mark
|
||||||
*/
|
*/
|
||||||
addItalic: (): Command => ({ commands }) => {
|
setItalic: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('italic')
|
return commands.addMark('italic')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -57,9 +57,9 @@ const Italic = Mark.create({
|
|||||||
return commands.toggleMark('italic')
|
return commands.toggleMark('italic')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove an italic mark
|
* Unset an italic mark
|
||||||
*/
|
*/
|
||||||
removeItalic: (): Command => ({ commands }) => {
|
unsetItalic: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('italic')
|
return commands.addMark('italic')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -47,9 +47,9 @@ const Link = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add a link mark
|
* Set a link mark
|
||||||
*/
|
*/
|
||||||
addLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
|
setLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
|
||||||
return commands.addMark('link', attributes)
|
return commands.addMark('link', attributes)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -59,9 +59,9 @@ const Link = Mark.create({
|
|||||||
return commands.toggleMark('link', attributes)
|
return commands.toggleMark('link', attributes)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove a link mark
|
* Unset a link mark
|
||||||
*/
|
*/
|
||||||
removeLink: (): Command => ({ commands }) => {
|
unsetLink: (): Command => ({ commands }) => {
|
||||||
return commands.removeMark('link')
|
return commands.removeMark('link')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -45,9 +45,9 @@ const Strike = Mark.create({
|
|||||||
addCommands() {
|
addCommands() {
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
* Add a strike mark
|
* Set a strike mark
|
||||||
*/
|
*/
|
||||||
addStrike: (): Command => ({ commands }) => {
|
setStrike: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('strike')
|
return commands.addMark('strike')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -57,9 +57,9 @@ const Strike = Mark.create({
|
|||||||
return commands.toggleMark('strike')
|
return commands.toggleMark('strike')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Remove a strike mark
|
* Unset a strike mark
|
||||||
*/
|
*/
|
||||||
removeStrike: (): Command => ({ commands }) => {
|
unsetStrike: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('strike')
|
return commands.addMark('strike')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const Underline = Mark.create({
|
|||||||
/**
|
/**
|
||||||
* Set an underline mark
|
* Set an underline mark
|
||||||
*/
|
*/
|
||||||
addUnderline: (): Command => ({ commands }) => {
|
setUnderline: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('underline')
|
return commands.addMark('underline')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -45,7 +45,7 @@ const Underline = Mark.create({
|
|||||||
/**
|
/**
|
||||||
* Unset an underline mark
|
* Unset an underline mark
|
||||||
*/
|
*/
|
||||||
removeUnderline: (): Command => ({ commands }) => {
|
unsetUnderline: (): Command => ({ commands }) => {
|
||||||
return commands.addMark('underline')
|
return commands.addMark('underline')
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user