mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-04 03:29:03 +08:00
docs: update mark examples
This commit is contained in:
Hans Pagel
parent
d47b45cbc2
commit
4b1848917d
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
|
||||
bold
|
||||
toggleBold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setBold().run()" :disabled="editor.isActive('bold')">
|
||||
setBold
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetBold().run()" :disabled="!editor.isActive('bold')">
|
||||
unsetBold
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
|
||||
code
|
||||
toggleCode
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setCode().run()" :disabled="editor.isActive('code')">
|
||||
setCode
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetCode().run()" :disabled="!editor.isActive('code')">
|
||||
unsetCode
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
@ -46,3 +52,21 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.25em;
|
||||
border-radius: 0.25em;
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,7 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHighlight().run()"
|
||||
:class="{ 'is-active': editor.isActive('highlight') }"
|
||||
>
|
||||
highlight (any)
|
||||
</button>
|
||||
<button
|
||||
@click="editor.chain().focus().toggleHighlight({
|
||||
color: ''
|
||||
}).run()"
|
||||
:class="{ 'is-active': editor.isActive('highlight', {
|
||||
color: ''
|
||||
}) }"
|
||||
>
|
||||
highlight (default)
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
|
||||
"red"
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
|
||||
red
|
||||
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
|
||||
toggleHighlight
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
|
||||
orange
|
||||
@ -34,6 +15,18 @@
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
|
||||
purple
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
|
||||
red ('red')
|
||||
</button>
|
||||
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
|
||||
red (#ffa8a8)
|
||||
</button>
|
||||
<button
|
||||
@click="editor.chain().focus().unsetHighlight().run()"
|
||||
:disabled="!editor.isActive('highlight')"
|
||||
>
|
||||
unsetHighlight
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
@ -83,5 +76,8 @@ export default {
|
||||
<style lang="scss">
|
||||
mark {
|
||||
background-color: #ffe066;
|
||||
padding: 0.125em 0;
|
||||
border-radius: 0.25em;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
|
||||
italic
|
||||
toggleItalic
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setItalic().run()" :disabled="editor.isActive('italic')">
|
||||
setItalic
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetItalic().run()" :disabled="!editor.isActive('italic')">
|
||||
unsetItalic
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
setLink
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
|
||||
<button @click="editor.chain().focus().unsetLink().run()" :disabled="!editor.isActive('link')">
|
||||
unsetLink
|
||||
</button>
|
||||
<editor-content :editor="editor" />
|
||||
@ -16,6 +16,7 @@ import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import Link from '@tiptap/extension-link'
|
||||
import Code from '@tiptap/extension-code'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -37,13 +38,14 @@ export default {
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
}),
|
||||
Code,
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
|
||||
</p>
|
||||
<p>
|
||||
By default every link will get a \`rel="noopener noreferrer nofollow"\` attribute. It’s configurable though.
|
||||
By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute. It’s configurable though.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
@ -97,5 +99,14 @@ export default {
|
||||
a {
|
||||
color: #68CEF8;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.25em;
|
||||
border-radius: 0.25em;
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
|
||||
strike
|
||||
toggleStrike
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setStrike().run()" :disabled="editor.isActive('strike')">
|
||||
setStrike
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetStrike().run()" :disabled="!editor.isActive('strike')">
|
||||
unsetStrike
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
|
||||
subscript
|
||||
toggleSubscript
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setSubscript().run()" :disabled="editor.isActive('subscript')">
|
||||
setSubscript
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetSubscript().run()" :disabled="!editor.isActive('subscript')">
|
||||
unsetSubscript
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
|
||||
superscript
|
||||
toggleSuperscript
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setSuperscript().run()" :disabled="editor.isActive('superscript')">
|
||||
setSuperscript
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetSuperscript().run()" :disabled="!editor.isActive('superscript')">
|
||||
unsetSuperscript
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }">
|
||||
underline
|
||||
toggleUnderline
|
||||
</button>
|
||||
<button @click="editor.chain().focus().setUnderline().run()" :disabled="editor.isActive('underline')">
|
||||
setUnderline
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetUnderline().run()" :disabled="!editor.isActive('underline')">
|
||||
unsetUnderline
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
|
||||
@ -46,4 +46,4 @@ We are part of the [Y-Collective](https://opencollective.com/y-collective), a fu
|
||||
If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues/new/choose) to keep everything accessible to the whole community. For everything else, reach out to [humans@tiptap.dev](mailto:humans@tiptap.dev). We can take on a limited number of custom development and consulting contracts.
|
||||
|
||||
### Can we have a call?
|
||||
Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues).
|
||||
Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues)
|
||||
Loading…
Reference in New Issue
Block a user