ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

a few minor improvements to the content

Browse Source
This commit is contained in:
Hans Pagel
2020-09-24 15:58:40 +02:00
parent 299ca72f3e
commit 2848b814b6
4 changed files with 18 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/src/demos/Api/Schema/index.vue → docs/src/demos/Api/Schema/GenerateHtml/index.vue
View File

@@ -11,30 +11,26 @@ import Text from '@tiptap/extension-text'
export default { export default {
data() { data() {
return { return {
doc: { json: {
type: 'document', type: 'document',
content: [{ content: [{
type: 'paragraph', type: 'paragraph',
attrs: {
align: 'left',
},
content: [{ content: [{
type: 'text', type: 'text',
text: 'Example Text', text: 'Example Text',
}], }],
}], }],
}, },
html: '',
} }
}, },
computed: { mounted() {
html() { this.html = generateHtml(this.json, [
return generateHtml(this.doc, [ Document(),
Document(), Paragraph(),
Paragraph(), Text(),
Text(), ])
])
},
}, },
} }
</script> </script>

6
docs/src/docPages/api/schema.md
View File

@@ -71,3 +71,9 @@ class Text extends Node {
} }
} }
``` ```
## Difference between a Node and a Mark
*Nodes* are like blocks of content, for example paragraphs, headlines, code blocks, blockquotes and many more.
*Marks* can apply a different style to specific parts of text inside a *Node*. That’s the case for **bold**, *italic* or ~~striked~~ text. [Links](#) are *Marks*, too.

6
docs/src/docPages/api/schema/generate-html.md
View File

@@ -2,11 +2,13 @@
If you need to render the content on the server side, e. g. for a blog post that 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, e. g. for a blog post that was written with tiptap, you’ll probably need 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.
:::warning Work in progress :::warning Work in progress
Currently, that works only in the browser (client side), but we’re working on making this available to Node.js (to use it on the server side). Currently, that works only in the browser (client side), but we plan to bring this to Node.js (to use it on the server side).
::: :::
<demo name="Api/Schema" /> <demo name="Api/Schema/GenerateHtml" highlight="6,29-33"/>
## Converting JSON<>HTML with PHP ## Converting JSON<>HTML with PHP

19
docs/src/docPages/guide/build-your-editor.md
View File

@@ -25,22 +25,3 @@ Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t
<demo name="Guide/BuildYourEditor" highlight="10-13,30-33" /> <demo name="Guide/BuildYourEditor" highlight="10-13,30-33" />
That’s also the place where you can register custom extensions, which you or someone else built for tiptap. That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
### Related links
* [List of available commands](/api/commands)
* [List of available extensions](/api/extensions)
* Build custom extensions
## Difference between nodes and marks
tiptap used a JSON schema under the hood. Every part of the text is stored as a specific type. There is a `Document` type (it’s needed, but invisible – like the `<body>` in HTML).
*Nodes* are like blocks of content, for example a paragraph or a headline. Yes, this paragraph is a node.
*Marks* can apply a different style to parts of text inside a node. A good example is **bold text**. That’s a mark. *Italic*, `inline code` or [links](#) are marks too.
### Related links
* [Learn more about the schema](/api/schema)
* [List of available extensions](/api/extensions)