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

add more content

Browse Source
This commit is contained in:
Hans Pagel
2020-08-12 11:45:29 +02:00
parent 8b17869879
commit b091f52505
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/src/docPages/configuration.md
View File

@@ -26,16 +26,21 @@ Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t
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](/commands/)
* [List of available extensions](/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.
*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.
*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
### Related links
* List of all available Commands
* List of all available Extensions
* Build custom Extensions
* [Learn more about the schema](/schema/)
* [List of available extensions](/extensions/)

20
docs/src/docPages/getting-started.md
View File

@@ -1,6 +1,6 @@
# First steps with tiptap
# Getting started
tiptap is framework-agnostic and works with plain JavaScript, Vue.js and React. To use tiptap with Vue.js or one of the tools that are based on Vue.js like Nuxt.js or Gridsome, you’ll need the tiptap Vue.js adapter. Install it as an dependency in your project:
tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages. To use tiptap with Vue.js (or Nuxt.js), you’ll need the tiptap Vue.js adapter. You can install it as an dependency in your project:
```bash
# Install Vue.js adapter with npm
@@ -10,15 +10,19 @@ npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue
```
Create a new Vue component (e. g. `<Tiptap />`) and add the following content. That’s the shortest way to get tiptap up and running with Vue.js. No worries, you’ll be able to add more functionality soon.
Now you have got everything in place to add tiptap to your Vue.js project.
## Create a new component
Create a new Vue component (e. g. `<Tiptap />`) and add the following content. That is the shortest way to get tiptap up and running with Vue.js. It’s a pretty basic version of tiptap but no worries, you will be able to add more functionality soon.
<demo name="GettingStarted" />
Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read more here:
Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read the related links down here.
Otherwise: Congrats! You’ve got it! Let’s start with the confiuration in the next step.
### Related links
* [tiptap doesn’t have a default styling](#)
* [Use tiptap with Nuxt.js](#)
Most people would expect a text editor to have buttons to make the text bold or add links. tiptap has all of that, but it is very modular. You are free to decided what you use and how you use it. Use it as a more powerful textarea or build a full-blown editor. tiptap is ready for both.
But let’s try to add a menu in the next step.