docs: update content
This commit is contained in:
@@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import { content } from './content.js'
|
import { content } from './content.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -87,7 +87,9 @@ export default {
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content,
|
content,
|
||||||
editorProps: {
|
editorProps: {
|
||||||
attributes: {
|
attributes: {
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
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 Collaboration from '@tiptap/extension-collaboration'
|
||||||
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
|
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
|
||||||
import TaskList from '@tiptap/extension-task-list'
|
import TaskList from '@tiptap/extension-task-list'
|
||||||
@@ -91,7 +91,9 @@ export default {
|
|||||||
|
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions().filter(extension => extension.name !== 'history'),
|
StarterKit.configure({
|
||||||
|
history: false,
|
||||||
|
}),
|
||||||
Highlight,
|
Highlight,
|
||||||
TaskList,
|
TaskList,
|
||||||
TaskItem,
|
TaskItem,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useEditor, EditorContent } from '@tiptap/react'
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
const MenuBar = ({ editor }) => {
|
const MenuBar = ({ editor }) => {
|
||||||
@@ -125,7 +125,7 @@ const MenuBar = ({ editor }) => {
|
|||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<h2>
|
<h2>
|
||||||
|
|||||||
@@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -87,7 +87,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<h2>
|
<h2>
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
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 TextAlign from '@tiptap/extension-text-align'
|
||||||
import Highlight from '@tiptap/extension-highlight'
|
import Highlight from '@tiptap/extension-highlight'
|
||||||
|
|
||||||
@@ -62,7 +62,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
TextAlign,
|
TextAlign,
|
||||||
Highlight,
|
Highlight,
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
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 Highlight from '@tiptap/extension-highlight'
|
||||||
import Typography from '@tiptap/extension-typography'
|
import Typography from '@tiptap/extension-typography'
|
||||||
|
|
||||||
@@ -41,7 +41,7 @@ export default {
|
|||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Highlight,
|
Highlight,
|
||||||
Typography,
|
Typography,
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -5,13 +5,13 @@ import {
|
|||||||
BubbleMenu,
|
BubbleMenu,
|
||||||
FloatingMenu,
|
FloatingMenu,
|
||||||
} from '@tiptap/react'
|
} from '@tiptap/react'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ import {
|
|||||||
BubbleMenu,
|
BubbleMenu,
|
||||||
FloatingMenu,
|
FloatingMenu,
|
||||||
} from '@tiptap/vue-2'
|
} from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -63,7 +63,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -64,7 +64,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
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 Table from '@tiptap/extension-table'
|
||||||
import TableRow from '@tiptap/extension-table-row'
|
import TableRow from '@tiptap/extension-table-row'
|
||||||
import TableCell from '@tiptap/extension-table-cell'
|
import TableCell from '@tiptap/extension-table-cell'
|
||||||
@@ -109,7 +109,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Table.configure({
|
Table.configure({
|
||||||
resizable: true,
|
resizable: true,
|
||||||
}),
|
}),
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import tippy from 'tippy.js'
|
import tippy from 'tippy.js'
|
||||||
import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2'
|
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 Commands from './commands'
|
||||||
import CommandsList from './CommandsList'
|
import CommandsList from './CommandsList'
|
||||||
|
|
||||||
@@ -25,7 +25,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Commands.configure({
|
Commands.configure({
|
||||||
suggestion: {
|
suggestion: {
|
||||||
items: query => {
|
items: query => {
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Details from './details'
|
import Details from './details'
|
||||||
import DetailsSummary from './details-summary'
|
import DetailsSummary from './details-summary'
|
||||||
|
|
||||||
@@ -38,7 +38,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Details,
|
Details,
|
||||||
DetailsSummary,
|
DetailsSummary,
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Iframe from './iframe'
|
import Iframe from './iframe'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -27,7 +27,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Iframe,
|
Iframe,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import DragHandle from './DragHandle.js'
|
import DragHandle from './DragHandle.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -23,7 +23,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
DragHandle,
|
DragHandle,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import { TrailingNode } from './trailing-node'
|
import { TrailingNode } from './trailing-node'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -23,7 +23,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
TrailingNode,
|
TrailingNode,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import { WordBreak } from './word-break'
|
import { WordBreak } from './word-break'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -30,7 +30,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
WordBreak,
|
WordBreak,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
|
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
|
import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -34,7 +34,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
|
import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2'
|
import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -34,7 +34,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
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'
|
import Placeholder from '@tiptap/extension-placeholder'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Placeholder,
|
Placeholder,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -47,7 +47,9 @@ export default {
|
|||||||
Wow, this editor instance exports its content as HTML.
|
Wow, this editor instance exports its content as HTML.
|
||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
// Get the initial content …
|
// Get the initial content …
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -47,7 +47,9 @@ export default {
|
|||||||
Wow, this editor instance exports its content as JSON.
|
Wow, this editor instance exports its content as JSON.
|
||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
// Get the initial content …
|
// Get the initial content …
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -35,7 +35,9 @@ export default {
|
|||||||
If you want to check the state, you can call <code>editor.isEditable()</code>.
|
If you want to check the state, you can call <code>editor.isEditable()</code>.
|
||||||
</p>
|
</p>
|
||||||
`,
|
`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -42,7 +42,9 @@ export default {
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: this.value,
|
content: this.value,
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
// HTML
|
// HTML
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import DraggableItem from './DraggableItem.js'
|
import DraggableItem from './DraggableItem.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -23,7 +23,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
DraggableItem,
|
DraggableItem,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import NodeView from './Extension.js'
|
import NodeView from './Extension.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
NodeView,
|
NodeView,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import NodeView from './Extension.js'
|
import NodeView from './Extension.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
NodeView,
|
NodeView,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useEditor, EditorContent } from '@tiptap/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 ReactComponent from './Extension.js'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
ReactComponent,
|
ReactComponent,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useEditor, EditorContent } from '@tiptap/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 ReactComponent from './Extension.js'
|
||||||
import './styles.scss'
|
import './styles.scss'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
ReactComponent,
|
ReactComponent,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import TableOfContents from './TableOfContents.js'
|
import TableOfContents from './TableOfContents.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -23,7 +23,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
TableOfContents,
|
TableOfContents,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import VueComponent from './Extension.js'
|
import VueComponent from './Extension.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
VueComponent,
|
VueComponent,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import VueComponent from './Extension.js'
|
import VueComponent from './Extension.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -21,7 +21,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
VueComponent,
|
VueComponent,
|
||||||
],
|
],
|
||||||
content: `
|
content: `
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -20,7 +20,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: '<p>Hello World! 🌎️</p>',
|
content: '<p>Hello World! 🌎️</p>',
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -34,11 +34,13 @@ The `element` specifies the HTML element the editor will be binded too. The foll
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
element: document.querySelector('.element'),
|
element: document.querySelector('.element'),
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -53,7 +55,7 @@ It’s required to pass a list of extensions to the `extensions` property, even
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Document from '@tiptap/extension-document'
|
import Document from '@tiptap/extension-document'
|
||||||
import Paragraph from '@tiptap/extension-paragraph'
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
import Text from '@tiptap/extension-text'
|
import Text from '@tiptap/extension-text'
|
||||||
@@ -61,7 +63,9 @@ import Highlight from '@tiptap/extension-highlight'
|
|||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
// Use the default extensions
|
// Use the default extensions
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
|
|
||||||
// … or use specific extensions
|
// … or use specific extensions
|
||||||
extensions: [
|
extensions: [
|
||||||
@@ -72,7 +76,7 @@ new Editor({
|
|||||||
|
|
||||||
// … or both
|
// … or both
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Highlight,
|
Highlight,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@@ -83,11 +87,13 @@ With the `content` property you can provide the initial content for the editor.
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
content: `<p>Example Text</p>`,
|
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
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
content: `<p>Example Text</p>`,
|
content: `<p>Example Text</p>`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
editable: false,
|
editable: false,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -110,10 +118,12 @@ With `autofocus` you can force the cursor to jump in the editor on initializatio
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
autofocus: false,
|
autofocus: false,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -132,11 +142,13 @@ By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rul
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
content: `<p>Example Text</p>`,
|
content: `<p>Example Text</p>`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
enableInputRules: false,
|
enableInputRules: false,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -146,11 +158,13 @@ By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rul
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
content: `<p>Example Text</p>`,
|
content: `<p>Example Text</p>`,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
enablePasteRules: false,
|
enablePasteRules: false,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -160,10 +174,12 @@ By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/t
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
injectCSS: false,
|
injectCSS: false,
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -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/) |
|
| [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/) |
|
| [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) |
|
||||||
|
|
||||||
You don’t 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 don’t 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
|
## How extensions work
|
||||||
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
|
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
|
||||||
|
|||||||
@@ -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+`). That’s all. But have a look yourself:
|
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+`). That’s all. But have a look yourself:
|
||||||
|
|
||||||
:::warning Breaking Change from 1.x → 2.x
|
:::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
|
## Installation
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
|
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
|
||||||
|
|
||||||
:::warning Breaking Change from 1.x → 2.x
|
:::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
|
## Installation
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
|
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
|
||||||
|
|
||||||
:::warning Breaking Change from 1.x → 2.x
|
:::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
|
## Installation
|
||||||
|
|||||||
@@ -82,23 +82,25 @@ new Editor({
|
|||||||
Have a look at the documentation of the extension you use to learn more about their settings.
|
Have a look at the documentation of the extension you use to learn more about their settings.
|
||||||
|
|
||||||
### Default extensions
|
### 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
|
```js
|
||||||
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
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:
|
And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
extensions: defaultExtensions({
|
extensions: StarterKit.configure({
|
||||||
heading: {
|
heading: {
|
||||||
levels: [1, 2, 3],
|
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
|
```js
|
||||||
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import Strike from '@tiptap/extension-strike'
|
import Strike from '@tiptap/extension-strike'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions(),
|
StarterKit,
|
||||||
Strike,
|
Strike,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@@ -123,11 +125,13 @@ new Editor({
|
|||||||
Don’t want to load a specific extension? Just filter it out:
|
Don’t want to load a specific extension? Just filter it out:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor, defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
...defaultExtensions().filter(extension => extension.name !== 'history'),
|
StarterKit.configure({
|
||||||
|
history: false,
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -45,11 +45,13 @@ Let’s initialize the editor in JavaScript now:
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
new Editor({
|
new Editor({
|
||||||
element: document.querySelector('.element'),
|
element: document.querySelector('.element'),
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: '<p>Hello World!</p>',
|
content: '<p>Hello World!</p>',
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ This is the fastest way to get tiptap up and running with Alpine.js. It will giv
|
|||||||
```js
|
```js
|
||||||
import alpinejs from 'alpinejs'
|
import alpinejs from 'alpinejs'
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
window.setupEditor = function(content) {
|
window.setupEditor = function(content) {
|
||||||
return {
|
return {
|
||||||
@@ -56,7 +56,9 @@ window.setupEditor = function(content) {
|
|||||||
init(element) {
|
init(element) {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
element: element,
|
element: element,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: this.content,
|
content: this.content,
|
||||||
onUpdate: ({ editor }) => {
|
onUpdate: ({ editor }) => {
|
||||||
this.content = editor.getHTML()
|
this.content = editor.getHTML()
|
||||||
|
|||||||
@@ -10,10 +10,12 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b
|
|||||||
<div class="element"></div>
|
<div class="element"></div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
|
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({
|
const editor = new Editor({
|
||||||
element: document.querySelector('.element'),
|
element: document.querySelector('.element'),
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: '<p>Hello World!</p>',
|
content: '<p>Hello World!</p>',
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -40,8 +40,8 @@ TODO
|
|||||||
|
|
||||||
## index.js
|
## index.js
|
||||||
```js
|
```js
|
||||||
import { Editor } from "@tiptap/core"
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from "@tiptap/starter-kit"
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
window.setupEditor = function (content) {
|
window.setupEditor = function (content) {
|
||||||
return {
|
return {
|
||||||
@@ -51,7 +51,9 @@ window.setupEditor = function (content) {
|
|||||||
init(element) {
|
init(element) {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
element: element,
|
element: element,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: this.content,
|
content: this.content,
|
||||||
onUpdate: ({ editor }) => {
|
onUpdate: ({ editor }) => {
|
||||||
this.content = editor.getHTML()
|
this.content = editor.getHTML()
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -67,7 +67,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -46,11 +46,13 @@ This is the fastest way to get tiptap up and running with React. It will give yo
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { useEditor, EditorContent } from '@tiptap/react'
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
const Tiptap = () => {
|
const Tiptap = () => {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: '<p>Hello World! 🌎️</p>',
|
content: '<p>Hello World! 🌎️</p>',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
|
|||||||
<script type="module">
|
<script type="module">
|
||||||
import { onMount, onDestroy } from 'svelte'
|
import { onMount, onDestroy } from 'svelte'
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
let element
|
let element
|
||||||
let editor
|
let editor
|
||||||
@@ -59,7 +59,9 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
|
|||||||
onMount(() => {
|
onMount(() => {
|
||||||
editor = new Editor({
|
editor = new Editor({
|
||||||
element: element,
|
element: element,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: '<p>Hello World! 🌍️ </p>',
|
content: '<p>Hello World! 🌍️ </p>',
|
||||||
onTransaction: () => {
|
onTransaction: () => {
|
||||||
// force re-render so `editor.isActive` works as expected
|
// force re-render so `editor.isActive` works as expected
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -68,7 +68,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -68,7 +68,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
content: '<p>I’m 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>
|
<script>
|
||||||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -98,7 +100,9 @@ export default {
|
|||||||
setup() {
|
setup() {
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
return { editor }
|
return { editor }
|
||||||
@@ -141,7 +145,7 @@ You’re probably used to bind your data with `v-model` in forms, that’s also
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -176,7 +180,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: this.modelValue,
|
content: this.modelValue,
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
this.$emit('update:modelValue', this.editor.getHTML())
|
this.$emit('update:modelValue', this.editor.getHTML())
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -121,11 +121,13 @@
|
|||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
|
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({
|
const editor = new Editor({
|
||||||
element: document.querySelector('.element'),
|
element: document.querySelector('.element'),
|
||||||
extensions: defaultExtensions(),
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
],
|
||||||
content: '<p>Hello World :-)</p>',
|
content: '<p>Hello World :-)</p>',
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user