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)
## 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
To check out some live examples, visit [tiptap.scrumpy.io](https://tiptap.scrumpy.io/).
@ -24,7 +24,7 @@ yarn add tiptap
```vue
<template>
<editor>
<!-- Add HTML to the scoped slot called "content" -->
<!-- Add HTML to the scoped slot called `content` -->
<div slot="content" slot-scope="props">
<p>Hi, I'm just a boring paragraph</p>
</div>
@ -161,40 +161,41 @@ export default class BlockquoteNode extends Node {
}
// the prosemirror schema object
// take a look at https://prosemirror.net/docs/guide/#schema for a detailed explanation
get schema() {
return {
content: 'block+',
group: 'block',
defining: true,
draggable: false,
// this rule is for parsing pasted HTML
// so every blockquote tag will be converted to this blockquote node
// define how the editor will detect your node from pasted HTML
// every blockquote tag will be converted to this blockquote node
parseDOM: [
{ tag: 'blockquote' },
],
// this is how this node 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
// in this case a blockquote tag with a class called `awesome-blockquote` will be rendered
// the '0' stands for its text content inside
toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0],
}
}
// this command will be called from menus to add a blockquote
// 'type' is the prosemirror schema object for this blockquote
// 'schema' is a collection of all registered nodes and marks
// `type` is the prosemirror schema object for this blockquote
// `schema` is a collection of all registered nodes and marks
command({ type, schema }) {
return wrapIn(type)
}
// 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 }) {
return {
'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 }) {
return [
wrappingInputRule(/^\s*>\s$/, type),