mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
add some information about extensions to readme
This commit is contained in:
parent
7c620236ab
commit
6f17e26f51
66
README.md
66
README.md
@ -12,13 +12,13 @@ A rich-text editor for Vue.js
|
||||
npm install tiptap
|
||||
```
|
||||
|
||||
## Setup
|
||||
## Basic Setup
|
||||
```vue
|
||||
<template>
|
||||
<editor>
|
||||
<!-- Add HTML to the scoped slot called "content" -->
|
||||
<div slot="content" slot-scope="props">
|
||||
<p>Hello world</p>
|
||||
<p>Hi, I'm just a boring paragraph</p>
|
||||
</div>
|
||||
</editor>
|
||||
</template>
|
||||
@ -46,6 +46,68 @@ export default {
|
||||
|
||||
## Extensions
|
||||
|
||||
By default the editor will only support some boring paragraphs. Other nodes and marks are available as **extensions**. There is a package called `tiptap-extensions` with the most basic nodes, marks and plugins.
|
||||
|
||||
#### Available Extensions
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<editor :extensions="extensions">
|
||||
<div slot="content" slot-scope="props">
|
||||
<h1>Yay Headlines!</h1>
|
||||
<p>All these <strong>cool tags</strong> are working now.</p>
|
||||
</div>
|
||||
</editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import the editor
|
||||
import { Editor } from 'tiptap'
|
||||
import {
|
||||
Blockquote,
|
||||
BulletList,
|
||||
CodeBlock,
|
||||
HardBreak,
|
||||
Heading,
|
||||
ListItem,
|
||||
OrderedList,
|
||||
TodoItem,
|
||||
TodoList,
|
||||
Bold,
|
||||
Code,
|
||||
Italic,
|
||||
Link,
|
||||
} from 'tiptap-extensions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensions: [
|
||||
new Blockquote(),
|
||||
new BulletList(),
|
||||
new CodeBlock(),
|
||||
new HardBreak(),
|
||||
new Heading(),
|
||||
new ListItem(),
|
||||
new OrderedList(),
|
||||
new TodoItem(),
|
||||
new TodoList(),
|
||||
new Bold(),
|
||||
new Code(),
|
||||
new Italic(),
|
||||
new Link(),
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Create Custom Extensions
|
||||
|
||||
Soon …
|
||||
Until then you can take a look at the [embed example](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds).
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user