docs: update content
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<pre><code>{{ html }}</code></pre>
|
<pre><code>{{ output }}</code></pre>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -7,29 +7,44 @@ import { generateHTML } from '@tiptap/html'
|
|||||||
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'
|
||||||
|
import Bold from '@tiptap/extension-bold'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
output: '',
|
||||||
json: {
|
json: {
|
||||||
type: 'document',
|
type: 'document',
|
||||||
content: [{
|
content: [
|
||||||
type: 'paragraph',
|
{
|
||||||
content: [{
|
type: 'paragraph',
|
||||||
type: 'text',
|
content: [
|
||||||
text: 'Example Text',
|
{
|
||||||
}],
|
type: 'text',
|
||||||
}],
|
text: 'Example ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
marks: [
|
||||||
|
{
|
||||||
|
type: 'bold',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
text: 'Text',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
html: '',
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.html = generateHTML(this.json, [
|
this.output = generateHTML(this.json, [
|
||||||
Document,
|
Document,
|
||||||
Paragraph,
|
Paragraph,
|
||||||
Text,
|
Text,
|
||||||
|
Bold,
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,21 +10,21 @@ You can define your event listeners on a new editor instance right-away:
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
onInit: () => {
|
onInit() {
|
||||||
// The editor is ready.
|
// The editor is ready.
|
||||||
},
|
},
|
||||||
onUpdate: () => {
|
onUpdate() {
|
||||||
// The content has changed.
|
// The content has changed.
|
||||||
},
|
},
|
||||||
onFocus: () => {
|
onTransaction({ transaction }) {
|
||||||
|
// The editor state has changed.
|
||||||
|
},
|
||||||
|
onFocus({ event }) {
|
||||||
// The editor is focused.
|
// The editor is focused.
|
||||||
},
|
},
|
||||||
onBlur: () => {
|
onBlur({ event }) {
|
||||||
// The editor isn’t focused anymore.
|
// The editor isn’t focused anymore.
|
||||||
},
|
},
|
||||||
onTransaction: ({ transaction }) => {
|
|
||||||
// The editor state has changed.
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -41,6 +41,10 @@ editor.on('update', () => {
|
|||||||
// The content has changed.
|
// The content has changed.
|
||||||
}
|
}
|
||||||
|
|
||||||
|
editor.on('transaction', ({ transaction }) => {
|
||||||
|
// The editor state has changed.
|
||||||
|
}
|
||||||
|
|
||||||
editor.on('focus', () => {
|
editor.on('focus', () => {
|
||||||
// The editor is focused.
|
// The editor is focused.
|
||||||
}
|
}
|
||||||
@@ -48,10 +52,6 @@ editor.on('focus', () => {
|
|||||||
editor.on('blur', () => {
|
editor.on('blur', () => {
|
||||||
// The editor isn’t focused anymore.
|
// The editor isn’t focused anymore.
|
||||||
}
|
}
|
||||||
|
|
||||||
editor.on('transaction', ({ transaction }) => {
|
|
||||||
// The editor state has changed.
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Unbind event listeners
|
### Unbind event listeners
|
||||||
|
|||||||
@@ -78,24 +78,25 @@ editor.commands.setContent(`<p>Example Text</p>`)
|
|||||||
|
|
||||||
## Not an option: Markdown
|
## Not an option: Markdown
|
||||||
|
|
||||||
Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but there are a few limitations:
|
Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
|
||||||
|
|
||||||
* HTML and JSON can both have deeply nested structures, Markdown can’t have those
|
* Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
|
||||||
* Tables are not part of the Markdown standard, and can’t easily be stored and restored from Markdown
|
* There are enough packages to convert HTML to Markdown and vice-versa.
|
||||||
|
* Markdown standards vary.
|
||||||
|
|
||||||
You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
|
You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
|
||||||
|
|
||||||
If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Their code is open source, so maybe you can learn from them.
|
If you still think you need Markdown, ProseMirror has an [example on how to deal with Markdown](https://prosemirror.net/examples/markdown/) and [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Maybe you can learn from them.
|
||||||
|
|
||||||
That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example.
|
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content.
|
||||||
|
|
||||||
## Generate HTML from ProseMirror JSON
|
## Generate HTML from ProseMirror JSON
|
||||||
If you need to render the content on the server side, for example to render a blog post which was written with tiptap, you’ll probably need a way to do just that without an actual editor instance.
|
If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want a way to do just that without an actual editor instance.
|
||||||
|
|
||||||
That’s what `generateHTML()` is for. It’s a utility function that renders HTML without an actual editor instance. As an easy alternative, you can also use tiptap in a [read-only mode](/examples/read-only).
|
That’s what the `generateHTML()` is for. It’s a utility function that renders HTML without an actual editor instance. As an alternative, you can also use tiptap in a [read-only mode](/examples/read-only).
|
||||||
|
|
||||||
:::info Browser-only rendering
|
:::info Browser-only rendering
|
||||||
Import a lightweight implementation from `@tiptap/core` if you’re using the function in a browser context only.
|
Import a lightweight implementation of `generateHTML()` from `@tiptap/core` if you’re using the function in a browser context only.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
<demo name="Api/Schema/GenerateHTML" highlight="6,29-33"/>
|
<demo name="Api/Schema/GenerateHTML" highlight="6,43-48"/>
|
||||||
|
|||||||
@@ -32,10 +32,10 @@
|
|||||||
link: /examples/read-only
|
link: /examples/read-only
|
||||||
- title: Minimalist
|
- title: Minimalist
|
||||||
link: /examples/minimalist
|
link: /examples/minimalist
|
||||||
|
- title: Use with v-model
|
||||||
|
link: /examples/v-model
|
||||||
- title: Export HTML or JSON
|
- title: Export HTML or JSON
|
||||||
link: /examples/export-html-or-json
|
link: /examples/export-html-or-json
|
||||||
- title: Use v-model
|
|
||||||
link: /examples/v-model
|
|
||||||
- title: Share feedback
|
- title: Share feedback
|
||||||
link: /overview/feedback
|
link: /overview/feedback
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user