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> <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,
]) ])
}, },
} }

View File

@@ -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 isnt focused anymore. // The editor isnt 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 isnt focused anymore. // The editor isnt focused anymore.
} }
editor.on('transaction', ({ transaction }) => {
// The editor state has changed.
}
``` ```
### Unbind event listeners ### Unbind event listeners

View File

@@ -78,24 +78,25 @@ editor.commands.setContent(`<p>Example Text</p>`)
## 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 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 * Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
* Tables are not part of the Markdown standard, and cant 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, 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 :::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 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