mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 22:36:14 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add more text to the configuration page

Browse Source
This commit is contained in:
Hans Pagel 2020-08-12 11:16:29 +02:00
parent 8038ea9f94
commit 8b17869879
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/SimpleMenuBar/index.vue
View File

@ -34,7 +34,7 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
content: '<p>Hi! 👋 I’m a text editor with just one button. Select some text and press the button to see what it does. Yes, it’s marking text <strong>bold</strong>. Amazing, isn’t it?</p>',
extensions: extensions(),
renderer: Renderer,
})

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

@ -1,16 +1,20 @@
# Configure tiptap
In its basic 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’d like to have.
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.
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" />
Once initiated the editor has a powerful API. So called commands allow you to modify the text. In this example `this.editor.bold` marks the selected text bold. There a ton of other commands (see the [list of available commands](/commands/)) and you can even chain them to do multiple things at once.
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.
For most use cases you want to
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
@ -22,6 +26,14 @@ 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.
## 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.
**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
* List of all available Commands