update content

This commit is contained in:
Hans Pagel
2020-11-12 16:36:29 +01:00
parent eb827d774b
commit 262ff88e59
7 changed files with 93 additions and 33 deletions

View File

@@ -1,24 +1,5 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().fontFamily('Inter').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Inter' }) }">
Inter
</button>
<button @click="editor.chain().focus().fontFamily('Comic Sans MS, Comic Sans').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'Comic Sans MS, Comic Sans' }) }">
Comic Sans
</button>
<button @click="editor.chain().focus().fontFamily('serif').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'serif' }) }">
serif
</button>
<button @click="editor.chain().focus().fontFamily('monospace').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'monospace' }) }">
monospace
</button>
<button @click="editor.chain().focus().fontFamily('cursive').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontFamily: 'cursive' }) }">
cursive
</button>
<button @click="editor.chain().focus().fontFamily().run()">
Remove font-family
</button>
<editor-content :editor="editor" />
</div>
</template>
@@ -30,7 +11,6 @@ import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'
import FontFamily from '@tiptap/extension-font-family'
export default {
components: {
@@ -50,14 +30,10 @@ export default {
Paragraph(),
Text(),
TextStyle(),
FontFamily(),
],
content: `
<p><span style="font-family: Inter">Inter</span></p>
<p><span style="font-family: Comic Sans MS, Comic Sans">Comic Sans</span></p>
<p><span style="font-family: serif">serif</span></p>
<p><span style="font-family: monospace">monospace</span></p>
<p><span style="font-family: cursive">cursive</span></p>
<p><span>This has a &lt;span&gt; tag without a style attribute, so its thrown away.</span></p>
<p><span style="">But this one is wrapped in a &lt;span&gt; tag with an inline style attribute, so its kept - even if its empty for now.</span></p>
`,
})
},