docs: update content

This commit is contained in:
Philipp Kühn 2021-05-06 18:41:22 +02:00
parent 21384fc7a6
commit 00d8958b72
49 changed files with 180 additions and 122 deletions

View File

@ -71,7 +71,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import { content } from './content.js'
export default {
@ -87,7 +87,9 @@ export default {
mounted() {
this.editor = new Editor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content,
editorProps: {
attributes: {

View File

@ -22,7 +22,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import TaskList from '@tiptap/extension-task-list'
@ -91,7 +91,9 @@ export default {
this.editor = new Editor({
extensions: [
...defaultExtensions().filter(extension => extension.name !== 'history'),
StarterKit.configure({
history: false,
}),
Highlight,
TaskList,
TaskItem,

View File

@ -1,6 +1,6 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
const MenuBar = ({ editor }) => {
@ -125,7 +125,7 @@ const MenuBar = ({ editor }) => {
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<h2>

View File

@ -71,7 +71,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -87,7 +87,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<h2>

View File

@ -44,7 +44,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import TextAlign from '@tiptap/extension-text-align'
import Highlight from '@tiptap/extension-highlight'
@ -62,7 +62,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
TextAlign,
Highlight,
],

View File

@ -6,7 +6,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight'
import Typography from '@tiptap/extension-typography'
@ -41,7 +41,7 @@ export default {
</p>
`,
extensions: [
...defaultExtensions(),
StarterKit,
Highlight,
Typography,
],

View File

@ -5,13 +5,13 @@ import {
BubbleMenu,
FloatingMenu,
} from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -45,7 +45,7 @@ import {
BubbleMenu,
FloatingMenu,
} from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -63,7 +63,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -64,7 +64,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
@ -109,7 +109,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Table.configure({
resizable: true,
}),

View File

@ -7,7 +7,7 @@
<script>
import tippy from 'tippy.js'
import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Commands from './commands'
import CommandsList from './CommandsList'
@ -25,7 +25,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Commands.configure({
suggestion: {
items: query => {

View File

@ -20,7 +20,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Details from './details'
import DetailsSummary from './details-summary'
@ -38,7 +38,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Details,
DetailsSummary,
],

View File

@ -10,7 +10,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Iframe from './iframe'
export default {
@ -27,7 +27,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Iframe,
],
content: `

View File

@ -6,7 +6,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import DragHandle from './DragHandle.js'
export default {
@ -23,7 +23,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
DragHandle,
],
content: `

View File

@ -6,7 +6,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import { TrailingNode } from './trailing-node'
export default {
@ -23,7 +23,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
TrailingNode,
],
content: `

View File

@ -13,7 +13,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import { WordBreak } from './word-break'
export default {
@ -30,7 +30,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
WordBreak,
],
content: `

View File

@ -1,12 +1,12 @@
import React from 'react'
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -17,7 +17,7 @@
<script>
import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -34,7 +34,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -1,12 +1,12 @@
import React from 'react'
import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -17,7 +17,7 @@
<script>
import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -34,7 +34,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
],
content: `
<p>

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
export default {
@ -21,7 +21,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Placeholder,
],
})

View File

@ -26,7 +26,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -47,7 +47,9 @@ export default {
Wow, this editor instance exports its content as HTML.
</p>
`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
// Get the initial content

View File

@ -26,7 +26,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -47,7 +47,9 @@ export default {
Wow, this editor instance exports its content as JSON.
</p>
`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
// Get the initial content

View File

@ -10,7 +10,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -35,7 +35,9 @@ export default {
If you want to check the state, you can call <code>editor.isEditable()</code>.
</p>
`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -42,7 +42,9 @@ export default {
mounted() {
this.editor = new Editor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: this.value,
onUpdate: () => {
// HTML

View File

@ -6,7 +6,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import DraggableItem from './DraggableItem.js'
export default {
@ -23,7 +23,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
DraggableItem,
],
content: `

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import NodeView from './Extension.js'
export default {
@ -21,7 +21,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
NodeView,
],
content: `

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import NodeView from './Extension.js'
export default {
@ -21,7 +21,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
NodeView,
],
content: `

View File

@ -1,13 +1,13 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
ReactComponent,
],
content: `

View File

@ -1,13 +1,13 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
...defaultExtensions(),
StarterKit,
ReactComponent,
],
content: `

View File

@ -6,7 +6,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import TableOfContents from './TableOfContents.js'
export default {
@ -23,7 +23,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
TableOfContents,
],
content: `

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js'
export default {
@ -21,7 +21,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
VueComponent,
],
content: `

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js'
export default {
@ -21,7 +21,7 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
VueComponent,
],
content: `

View File

@ -4,7 +4,7 @@
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -20,7 +20,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Hello World! 🌎️</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@ -34,11 +34,13 @@ The `element` specifies the HTML element the editor will be binded too. The foll
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
```
@ -53,7 +55,7 @@ Its required to pass a list of extensions to the `extensions` property, even
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
@ -61,7 +63,9 @@ import Highlight from '@tiptap/extension-highlight'
new Editor({
// Use the default extensions
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
// … or use specific extensions
extensions: [
@ -72,7 +76,7 @@ new Editor({
// … or both
extensions: [
...defaultExtensions(),
StarterKit,
Highlight,
],
})
@ -83,11 +87,13 @@ With the `content` property you can provide the initial content for the editor.
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
```
@ -96,11 +102,13 @@ The `editable` property determines if users can write into the editor.
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
editable: false,
})
```
@ -110,10 +118,12 @@ With `autofocus` you can force the cursor to jump in the editor on initializatio
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
autofocus: false,
})
```
@ -132,11 +142,13 @@ By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rul
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
enableInputRules: false,
})
```
@ -146,11 +158,13 @@ By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rul
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
enablePasteRules: false,
})
```
@ -160,10 +174,12 @@ By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/t
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
injectCSS: false,
})
```

View File

@ -22,7 +22,7 @@ There are also some extensions with more capabilities. We call them [nodes](/api
| [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) |
You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`defaultExtensions()`](/guide/configuration#default-extensions).
You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`StarterKit`](/guide/configuration#default-extensions).
## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

View File

@ -7,7 +7,7 @@
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block+`). Thats all. But have a look yourself:
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation

View File

@ -5,7 +5,7 @@
Yes, the schema is very strict. Without this extension you wont even be able to use paragraphs in the editor.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation

View File

@ -5,7 +5,7 @@
**The `Text` extension is required**, at least if you want to work with text of any kind and thats very likely. This extension is a little bit different, it doesnt even render HTML. Its plain text, thats all.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
:::
## Installation

View File

@ -82,23 +82,25 @@ new Editor({
Have a look at the documentation of the extension you use to learn more about their settings.
### Default extensions
We have put together a few of the most common extensions and provide a `defaultExtensions()` helper to load them. Here is how you to use that:
We have put together a few of the most common extensions and provide a `StarterKit` extension to load them. Here is how you to use that:
```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
```
And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name:
```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: defaultExtensions({
extensions: StarterKit.configure({
heading: {
levels: [1, 2, 3],
},
@ -106,15 +108,15 @@ new Editor({
})
```
The `defaultExtensions()` function returns an array, so if you want to load them and add some custom extensions you could write it like that:
The `StarterKit` extension contains a list of extensions. If you want to load them and add some custom extensions you could write it like that:
```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike'
new Editor({
extensions: [
...defaultExtensions(),
StarterKit,
Strike,
],
})
@ -123,11 +125,13 @@ new Editor({
Dont want to load a specific extension? Just filter it out:
```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
extensions: [
...defaultExtensions().filter(extension => extension.name !== 'history'),
StarterKit.configure({
history: false,
}),
],
})
```

View File

@ -45,11 +45,13 @@ Lets initialize the editor in JavaScript now:
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
```

View File

@ -47,7 +47,7 @@ This is the fastest way to get tiptap up and running with Alpine.js. It will giv
```js
import alpinejs from 'alpinejs'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function(content) {
return {
@ -56,7 +56,9 @@ window.setupEditor = function(content) {
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()

View File

@ -10,10 +10,12 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b
<div class="element"></div>
<script type="module">
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
import StarterKit from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
const editor = new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
</script>

View File

@ -40,8 +40,8 @@ TODO
## index.js
```js
import { Editor } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function (content) {
return {
@ -51,7 +51,9 @@ window.setupEditor = function (content) {
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()

View File

@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -67,7 +67,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@ -46,11 +46,13 @@ This is the fastest way to get tiptap up and running with React. It will give yo
```jsx
import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => {
const editor = useEditor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World! 🌎️</p>',
})

View File

@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
<script type="module">
import { onMount, onDestroy } from 'svelte'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
let element
let editor
@ -59,7 +59,9 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
onMount(() => {
editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World! 🌍️ </p>',
onTransaction: () => {
// force re-render so `editor.isActive` works as expected

View File

@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -68,7 +68,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -68,7 +68,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},
@ -88,7 +90,7 @@ Alternatively, you can use the Composition API with the `useEditor` method.
<script>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -98,7 +100,9 @@ export default {
setup() {
const editor = useEditor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
return { editor }
@ -141,7 +145,7 @@ Youre probably used to bind your data with `v-model` in forms, thats also
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@ -176,7 +180,9 @@ export default {
mounted() {
this.editor = new Editor({
content: this.modelValue,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
onUpdate: () => {
this.$emit('update:modelValue', this.editor.getHTML())
},

View File

@ -121,11 +121,13 @@
&lt;script type="module"&gt;
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
import StarterKit from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
const editor = new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '&lt;p&gt;Hello World :-)&lt;/p&gt;',
})
&lt;/script&gt;