Merge branch 'main' of github.com:ueberdosis/tiptap into main
This commit is contained in:
@@ -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 {
|
||||
@@ -57,7 +57,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()
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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>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
|
||||
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>',
|
||||
})
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>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>
|
||||
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>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>
|
||||
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>I’m running tiptap with Vue.js. 🎉</p>',
|
||||
extensions: defaultExtensions(),
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
})
|
||||
|
||||
return { editor }
|
||||
@@ -141,7 +145,7 @@ You’re probably used to bind your data with `v-model` in forms, that’s 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())
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user