mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-08 01:53:04 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

update readme

Browse Source
This commit is contained in:
Philipp Kühn 2018-08-25 15:34:14 +02:00 committed by GitHub
parent b8f68662b2
commit fc6588ca3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -6,7 +6,7 @@ A renderless and extendable rich-text editor for [Vue.js](https://github.com/vue
[![](https://img.shields.io/npm/l/tiptap.svg?maxAge=2592000&colorB=000000)](https://www.npmjs.com/package/tiptap) [![](https://img.shields.io/npm/l/tiptap.svg?maxAge=2592000&colorB=000000)](https://www.npmjs.com/package/tiptap)
## Why I built tiptap ## Why I built tiptap
I was looking for a text editor for [Vue.js](https://github.com/vuejs/vue) and found some solutions that didn't really satisfy me. The editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called [Slate.js](https://github.com/ianstormtaylor/slate), which impresses with its modularity. I came across [Prosemirror](https://github.com/prosemirror) and decided to build on it. Prosemirror is a toolkit for building rich-text editors that is already in use at many well-known companies such as Atlassian or New York Times. I was looking for a text editor for [Vue.js](https://github.com/vuejs/vue) and found some solutions that didn't really satisfy me. The editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called [Slate.js](https://github.com/ianstormtaylor/slate), which impresses with its modularity. I came across [Prosemirror](https://github.com/prosemirror) and decided to build on it. Prosemirror is a toolkit for building rich-text editors that is already in use at many well-known companies such as *Atlassian* or *New York Times*.
## Examples ## Examples
To check out some live examples, visit [tiptap.scrumpy.io](https://tiptap.scrumpy.io/). To check out some live examples, visit [tiptap.scrumpy.io](https://tiptap.scrumpy.io/).
@ -24,7 +24,7 @@ yarn add tiptap
```vue ```vue
<template> <template>
<editor> <editor>
<!-- Add HTML to the scoped slot called "content" --> <!-- Add HTML to the scoped slot called `content` -->
<div slot="content" slot-scope="props"> <div slot="content" slot-scope="props">
<p>Hi, I'm just a boring paragraph</p> <p>Hi, I'm just a boring paragraph</p>
</div> </div>
@ -161,40 +161,41 @@ export default class BlockquoteNode extends Node {
} }
// the prosemirror schema object // the prosemirror schema object
// take a look at https://prosemirror.net/docs/guide/#schema for a detailed explanation
get schema() { get schema() {
return { return {
content: 'block+', content: 'block+',
group: 'block', group: 'block',
defining: true, defining: true,
draggable: false, draggable: false,
// this rule is for parsing pasted HTML // define how the editor will detect your node from pasted HTML
// so every blockquote tag will be converted to this blockquote node // every blockquote tag will be converted to this blockquote node
parseDOM: [ parseDOM: [
{ tag: 'blockquote' }, { tag: 'blockquote' },
], ],
// this is how this node will be rendered // this is how this node will be rendered
// in this case a blockquote tag with a class called 'awesome-blockquote' will be rendered // in this case a blockquote tag with a class called `awesome-blockquote` will be rendered
// the '0' stands for its content inside // the '0' stands for its text content inside
toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0], toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0],
} }
} }
// this command will be called from menus to add a blockquote // this command will be called from menus to add a blockquote
// 'type' is the prosemirror schema object for this blockquote // `type` is the prosemirror schema object for this blockquote
// 'schema' is a collection of all registered nodes and marks // `schema` is a collection of all registered nodes and marks
command({ type, schema }) { command({ type, schema }) {
return wrapIn(type) return wrapIn(type)
} }
// here you can register some shortcuts // here you can register some shortcuts
// in this case you can create a blockquote with 'ctrl' + '>' // in this case you can create a blockquote with `ctrl` + `>`
keys({ type }) { keys({ type }) {
return { return {
'Ctrl->': wrapIn(type), 'Ctrl->': wrapIn(type),
} }
} }
// a blockquote will be created when you are on a new line and type '>' followed by a space // a blockquote will be created when you are on a new line and type `>` followed by a space
inputRules({ type }) { inputRules({ type }) {
return [ return [
wrappingInputRule(/^\s*>\s$/, type), wrappingInputRule(/^\s*>\s$/, type),