mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 15:49:23 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/heyscrumpy/tiptap

Browse Source
This commit is contained in:
Philipp Kühn 2018-08-26 19:43:05 +02:00
commit 4b805a0892
1 changed files with 63 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
README.md
View File

@ -53,9 +53,28 @@ export default {
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
| `@update` | `Function` | `undefined` | This will return the current `state` of Prosemirror on every change. |
## Scoped Slots
| **Name** | **Description** |
| --- | --- |
| `editor` | Here the content will be rendered. |
| `menubar` | Here a menu bar will be rendered. |
| `menububble` | Here a menu bubble will be rendered. |
### Slot Properties
The `menubar` and `menububble` slot will receive some properties.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| `nodes` | `Object` | A list of available nodes with active state and command. |
| `marks` | `Object` | A list of available marks with active state and command. |
| `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. |
## 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.
By default the editor will only support 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
@ -118,7 +137,7 @@ export default {
### Create Custom Extensions
The most powerful feature of tiptap is that you can create you own extensions. There are 3 basic types of extensions.
The most powerful feature of tiptap is that you can create your own extensions. There are 3 types of extensions.
| **Type** | **Description** |
| --- | --- |
@ -211,7 +230,7 @@ export default class BlockquoteNode extends Node {
### Create a Node as a Vue Component
The real power of the nodes comes in combination with Vue components. Lets build a iframe node, where you can change its url (this can also be found in our [examples](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds)).
The real power of the nodes comes in combination with Vue components. Lets build an iframe node, where you can change its url (this can also be found in our [examples](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds)).
```js
import { Node } from 'tiptap'
@ -284,6 +303,47 @@ export default class IframeNode extends Node {
}
```
## Building a Menu
This is a basic example of building a custom menu. A more advanced menu can be found at the [examples page](https://tiptap.scrumpy.io).
```vue
<template>
<editor :extensions="extensions">
<div slot="menubar" slot-scope="{ nodes, marks }">
<button :class="{ 'is-active': nodes.heading.active({ level: 1 }) }" @click="nodes.heading.command({ level: 1 })">
H1
</button>
<button :class="{ 'is-active': marks.bold.active() }" @click="marks.bold.command()">
Bold
</button>
</div>
<div slot="content" slot-scope="props">
<p>This text can be made bold.</p>
</div>
</editor>
</template>
<script>
import { Editor } from 'tiptap'
import { Heading, Bold } from 'tiptap-extensions'
export default {
components: {
Editor,
},
data() {
return {
extensions: [
new Heading({ maxLevel: 3 }),
new Bold(),
],
}
},
}
</script>
```
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.