docs: add content

This commit is contained in:
Hans Pagel
2020-12-14 23:29:57 +01:00
parent 2ff5d73eb7
commit bb3aa9ad89

View File

@@ -67,7 +67,6 @@ Use this interactive example to fiddle around:
<demo name="Guide/StoreContent/ExportHTML" :show-source="false"/> <demo name="Guide/StoreContent/ExportHTML" :show-source="false"/>
### Not an option: Markdown ### Not an option: Markdown
Unfortunately, **tiptap doesnt 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: Unfortunately, **tiptap doesnt 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:
* Both, HTML and JSON, can have deeply nested structures, Markdown is flat. * Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
@@ -80,10 +79,25 @@ If you still think you need Markdown, ProseMirror has an [example on how to deal
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content. That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content.
## Listening for changes
If you want to continuously store the updated content while people write, you can [hook into events](/api/events). Here is an example how that could look like:
```js
const editor = new Editor({
// intial content
content: `<p>Example Content</p>`,
// triggered on every change
onUpdate() {
const json = this.getJSON()
// send the content to an API here
},
})
```
## Rendering ## Rendering
### Option 1: Read-only instance of tiptap ### Option 1: Read-only instance of tiptap
To render the saved content, set the editor to read-only. Thats how you can achieve the exact same rendering as its in the editor, without duplicating your CSS and other code. To render the saved content, set the editor to read-only. Thats how you can achieve the exact same rendering as its in the editor, without duplicating your CSS and other code.
<demo name="Guide/StoreContent/ReadOnly" highlight="3-6,22,28,41-47" /> <demo name="Guide/StoreContent/ReadOnly" highlight="3-6,22,28,41-47" />