docs: update content

This commit is contained in:
Hans Pagel 2020-11-17 15:38:46 +01:00
parent 7e2f7f7a0f
commit 4579a15300
4 changed files with 48 additions and 32 deletions

View File

@ -1,5 +1,5 @@
<template>
<pre><code>{{ html }}</code></pre>
<pre><code>{{ output }}</code></pre>
</template>
<script>
@ -7,29 +7,44 @@ import { generateHTML } from '@tiptap/html'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Bold from '@tiptap/extension-bold'
export default {
data() {
return {
output: '',
json: {
type: 'document',
content: [{
type: 'paragraph',
content: [{
type: 'text',
text: 'Example Text',
}],
}],
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example ',
},
{
type: 'text',
marks: [
{
type: 'bold',
},
],
text: 'Text',
},
],
},
],
},
html: '',
}
},
mounted() {
this.html = generateHTML(this.json, [
this.output = generateHTML(this.json, [
Document,
Paragraph,
Text,
Bold,
])
},
}

View File

@ -10,21 +10,21 @@ You can define your event listeners on a new editor instance right-away:
```js
const editor = new Editor({
onInit: () => {
onInit() {
// The editor is ready.
},
onUpdate: () => {
onUpdate() {
// The content has changed.
},
onFocus: () => {
onTransaction({ transaction }) {
// The editor state has changed.
},
onFocus({ event }) {
// The editor is focused.
},
onBlur: () => {
onBlur({ event }) {
// The editor isnt focused anymore.
},
onTransaction: ({ transaction }) => {
// The editor state has changed.
},
})
```
@ -41,6 +41,10 @@ editor.on('update', () => {
// The content has changed.
}
editor.on('transaction', ({ transaction }) => {
// The editor state has changed.
}
editor.on('focus', () => {
// The editor is focused.
}
@ -48,10 +52,6 @@ editor.on('focus', () => {
editor.on('blur', () => {
// The editor isnt focused anymore.
}
editor.on('transaction', ({ transaction }) => {
// The editor state has changed.
}
```
### Unbind event listeners

View File

@ -78,24 +78,25 @@ editor.commands.setContent(`<p>Example Text</p>`)
## Not an option: Markdown
Unfortunately, **tiptap doesnt support Markdown as an input or output format**. We considered to add support for it, but there are a few limitations:
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:
* 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
* Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
* 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.
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
If you need to render the content on the server side, for example to render a blog post which was written with tiptap, youll 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, youll probably want a way to do just that without an actual editor instance.
Thats what `generateHTML()` is for. Its 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).
Thats what the `generateHTML()` is for. Its 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
Import a lightweight implementation from `@tiptap/core` if youre using the function in a browser context only.
Import a lightweight implementation of `generateHTML()` from `@tiptap/core` if youre 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"/>

View File

@ -32,10 +32,10 @@
link: /examples/read-only
- title: Minimalist
link: /examples/minimalist
- title: Use with v-model
link: /examples/v-model
- title: Export HTML or JSON
link: /examples/export-html-or-json
- title: Use v-model
link: /examples/v-model
- title: Share feedback
link: /overview/feedback