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

group all content files by section

Browse Source
This commit is contained in:
Hans Pagel
2020-08-18 21:47:04 +02:00
parent c182842681
commit 4d297e9116
18 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
docs/src/docPages/guide/build-your-editor.md Normal file
View File

@@ -0,0 +1,46 @@
# Configuration
In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have.
## Adding a menu
Let’s start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button:
<demo name="SimpleMenuBar" highlight="5-11" />
To mark selected text bold we can use `this.editor.bold`. There a ton of other commands and you can even chain them to do multiple things at once.
You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example.
### Related Links
* [List of available commands](/commands/)
## Configure extensions
You are free to choose which parts of tiptap you want to use. Tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those.
Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text.
<demo name="ExtensionConfiguration" highlight="10-13,30-33" />
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. 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](/schema/)
* [List of available extensions](/extensions/)

25
docs/src/docPages/guide/configuration.md Normal file
View File

@@ -0,0 +1,25 @@
# Configuration
tiptap is all about customization. There are a ton of options to configure the behavior and functionality of the editor. Most of those settings can be set before creating the Editor. Give tiptap a JSON with all the settings you would like to overwrite.
## Overwrite the default settings
See an example with `autoFocus: true` here:
```js
import { Editor } from '@tiptap/core'
import extensions from '@tiptap/starter-kit'
new Editor({
element: document.getElementsByClassName('element'),
extensions: extensions(),
content: '<p>Hey there!</p>',
autoFocus: true,
})
```
This will set the focus to tiptap after the editor is initialized. Of course, there are way more options available. Read about all of them in the related links.
### Related links
* [See available options](#)

1
docs/src/docPages/guide/custom-extensions.md Normal file
View File

@@ -0,0 +1 @@
# Custom Extensions

1
docs/src/docPages/guide/custom-styling.md Normal file
View File

@@ -0,0 +1 @@
# Custom Styling

14
docs/src/docPages/guide/get-content.md Normal file
View File

@@ -0,0 +1,14 @@
# Get Content
## Working with JSON
## Working with HTML
## tiptap doesn’t work with Markdown
Unfortunately, tiptap doesn’t support Markdown as input/output format. We considered to add support for it, but there are a few limitations:
* HTML or JSON can have deeply nested structures, Markdown not
* Tables are not part of the Markdown standard, and can’t be easily stored and restored from Markdown
You should really consider to work with HTML or JSON to store your content. If you still think you need Markdown, Nextcloud uses tiptap to work with Markdown. There code is open source, so maybe you can learn from them.

33
docs/src/docPages/guide/getting-started.md Normal file
View File

@@ -0,0 +1,33 @@
# Getting started
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.
## 1. Install the dependencies
We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project:
```bash
# Install Vue.js adapter with npm
npm install @tiptap/vue @tiptap/vue-starter-kit
# Or: Install Vue.js adapter with Yarn
yarn add @tiptap/vue @tiptap/vue-starter-kit
```
The `@tiptap/vue-starter-kit` includes a few basics you would probably need anyway. Cool, you have got everything in place to set up tiptap! 🙌
## 2. Create a new component
Create a new Vue component (you can call it `<Tiptap />`) and add the following content. This is the fastest way to get tiptap up and running with Vue.js. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
<demo name="GettingStarted" />
::: warning Using with Nuxt.js
If you are using **Nuxt.js**, note that tiptap needs to run in the client, not on the server. Wrapping the editor in a `<client-only>` tag is **required**.
:::
Congrats! You’ve got it! 🎉 Let’s start to build your editor in the next step.
### Related links
* [tiptap doesn’t have a default styling](#)

1
docs/src/docPages/guide/use-vue-components.md Normal file
View File

@@ -0,0 +1 @@
# Use Vue Components