add new extensions to the basic example
This commit is contained in:
@@ -10,6 +10,12 @@
|
|||||||
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
|
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||||
italic
|
italic
|
||||||
</button>
|
</button>
|
||||||
|
<button @click="editor.focus().underline()" :class="{ 'is-active': editor.isActive('underline') }">
|
||||||
|
underline
|
||||||
|
</button>
|
||||||
|
<button @click="editor.focus().strike()" :class="{ 'is-active': editor.isActive('strike') }">
|
||||||
|
strike
|
||||||
|
</button>
|
||||||
<button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
|
<button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
|
||||||
code
|
code
|
||||||
</button>
|
</button>
|
||||||
@@ -34,6 +40,15 @@
|
|||||||
<button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
|
<button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
|
||||||
h6
|
h6
|
||||||
</button>
|
</button>
|
||||||
|
<button @click="editor.focus().blockquote()" :class="{ 'is-active': editor.isActive('blockquote') }">
|
||||||
|
blockquote
|
||||||
|
</button>
|
||||||
|
<button @click="editor.focus().horizontalRule()">
|
||||||
|
horizontal rule
|
||||||
|
</button>
|
||||||
|
<button @click="editor.focus().hardBreak()">
|
||||||
|
hard break
|
||||||
|
</button>
|
||||||
<button @click="editor.focus().undo()">
|
<button @click="editor.focus().undo()">
|
||||||
undo
|
undo
|
||||||
</button>
|
</button>
|
||||||
@@ -61,11 +76,11 @@ export default {
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
|
extensions: defaultExtensions(),
|
||||||
content: `
|
content: `
|
||||||
<h2>Hey there!</h2>
|
<h2>Hey there!</h2>
|
||||||
<p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>
|
<p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>
|
||||||
`,
|
`,
|
||||||
extensions: defaultExtensions(),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
window.editor = this.editor
|
window.editor = this.editor
|
||||||
|
|||||||
@@ -33,3 +33,6 @@ In case you’ve built some custom extensions for your project, you’ll need to
|
|||||||
```js
|
```js
|
||||||
const CustomExtension = …
|
const CustomExtension = …
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Blockquotes must not be nested anymore
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user