add table of content support
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
# 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
|
||||
## Table of Contents
|
||||
|
||||
## 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" />
|
||||
@@ -13,11 +13,9 @@ To mark selected text bold we can use `this.editor.bold`. There a ton of other c
|
||||
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](/api/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.
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
# 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
|
||||
## Table of Contents
|
||||
|
||||
## Overwrite the default settings
|
||||
See an example with `autoFocus: true` here:
|
||||
|
||||
```js
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Custom Extensions
|
||||
Let’s extend tiptap with a custom extension!
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Option 1: Change defaults
|
||||
|
||||
Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut, and just that.
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Custom styling
|
||||
Tiptap is renderless, that doesn’t mean there is no styling provided. You can decided how your editor should look like.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Option 1: Style the plain HTML
|
||||
The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
# 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
|
||||
## Table of Contents
|
||||
|
||||
## 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
|
||||
@@ -17,7 +17,6 @@ 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="Guide/GettingStarted" />
|
||||
|
||||
Reference in New Issue
Block a user