tiptap/docs/src/docPages/guide/store-content.md

87 lines
2.7 KiB
Markdown
Raw Normal View History

2020-09-22 22:03:31 +08:00
# Store content
You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content.
2020-08-12 18:16:58 +08:00
2020-09-22 22:03:31 +08:00
You can store your content as JSON and restore the content from HTML, or the other way around. I dont know why you would do that, but tiptap wouldnt care.
2020-08-12 18:16:58 +08:00
2020-09-22 22:03:31 +08:00
## Option 1: JSON
JSON is probably easier to loop through, for example to look for a mention and its more like what tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
2020-08-12 18:16:58 +08:00
2020-09-16 23:01:47 +08:00
```js
const json = editor.json()
```
2020-09-22 22:03:31 +08:00
You can store that in your database (or send it to an API) and restore the document initially like that:
2020-09-16 23:01:47 +08:00
```js
new Editor({
// …
content: {
"type": "document",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
]
},
})
```
Or if you need to wait for something, you can do it later through the editor instance:
```js
editor.setContent({
"type": "document",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
]
})
```
2020-09-22 22:03:31 +08:00
## Option 2: HTML
2020-09-16 23:01:47 +08:00
HTML can be easily rendered in other places, for example in emails and its wildly used, so its probably easier to switch the editor at some point. Anyway, every editor instance provides a method to get HTML from the current document:
```js
const html = editor.html()
```
This can then be used to restore the document initially:
```js
new Editor({
// …
content: `<p>Example Text</p>`,
})
```
Or if you want to restore the content later (e. g. after an API call has finished), you can do that too:
```js
editor.setContent(`<p>Example Text</p>`)
```
## Not an option: Markdown
2020-08-12 18:16:58 +08:00
2020-09-22 22:03:31 +08:00
Unfortunately, **tiptap doesnt support Markdown as an input or output format**. We considered to add support for it, but there are a few limitations:
2020-08-12 18:16:58 +08:00
2020-09-16 23:01:47 +08:00
* HTML and JSON can both have deeply nested structures, Markdown cant have those
* Tables are not part of the Markdown standard, and cant easily be stored and restored from Markdown
2020-08-12 18:16:58 +08:00
2020-09-22 22:03:31 +08:00
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 to work with Markdown. Their code is open source, so maybe you can learn from them.
2020-09-30 22:42:19 +08:00
That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example.