GitHub - scrumpy/tiptap: A rich-text editor for Vue.js
source link: https://github.com/scrumpy/tiptap
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
tiptap
A renderless and extendable rich-text editor for Vue.js
Why I built tiptap
I was looking for a text editor for Vue.js 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, which impresses with its modularity. I came across Prosemirror and decided to build on it. Prosemirror is a toolkit for building rich-text editors that are already in use at many well-known companies such as Atlassian or New York Times.
What does renderless
mean?
With renderless components you'll have (almost) full control over markup and styling. I don't want to tell you what a menu should look like or where it should be rendered in the DOM. That's all up to you. There is also a good article about renderless components by Adam Wathan.
How is the data stored under the hood?
You can save your data as a raw HTML
string or can get a JSON
-serializable representation of your document. And of course, you can pass these two types back to the editor.
Examples
To check out some live examples, visit tiptap.scrumpy.io.
Installation
npm install tiptap
or
yarn add tiptap
Basic Setup
<template> <editor-content :editor="editor" /> </template> <script> // Import the editor import { Editor, EditorContent } from 'tiptap' export default { components: { EditorContent, }, data() { return { editor: null, } }, mounted() { this.editor = new Editor({ content: '<p>This is just a boring paragraph</p>', }) }, beforeDestroy() { this.editor.destroy() }, } </script>
Editor Properties
Property Type Default Descriptioncontent
Object|String
null
The editor state object used by Prosemirror. You can also pass HTML to the content
slot. When used both, the content
slot will be ignored.
editorProps
Object
{}
A list of Prosemirror editorProps.
editable
Boolean
true
When set to false
the editor is read-only.
autoFocus
Boolean
false
Focus the editor on init.
extensions
Array
[]
A list of extensions used, by the editor. This can be Nodes
, Marks
or Plugins
.
useBuiltInExtensions
Boolean
true
By default tiptap adds a Doc
, Paragraph
and Text
node to the Prosemirror schema.
dropCursor
Object
{}
Config for prosemirror-dropcursor
.
parseOptions
Object
{}
A list of Prosemirror parseOptions.
onInit
Function
undefined
This will return an Object with the current state
and view
of Prosemirror on init.
onFocus
Function
undefined
This will return an Object with the event
and current state
and view
of Prosemirror on focus.
onBlur
Function
undefined
This will return an Object with the event
and current state
and view
of Prosemirror on blur.
onUpdate
Function
undefined
This will return an Object with the current state
of Prosemirror, a getJSON()
and getHTML()
function and the transaction
on every change.
Editor Methods
Method Arguments DescriptionsetContent
content, emitUpdate, parseOptions
Replace the current content. You can pass an HTML string or a JSON document. emitUpdate
defaults to false
. parseOptions
defaults to those provided in constructor.
clearContent
emitUpdate
Clears the current content. emitUpdate
defaults to false
.
setOptions
options
Overwrites the current editor properties.
registerPlugin
plugin
Register a Prosemirror plugin.
getJSON
–
Get the current content as JSON.
getHTML
–
Get the current content as HTML.
focus
–
Focus the editor.
blur
–
Blur the editor.
destroy
–
Destroy the editor.
Components
Name Description<editor-content />
Here the content will be rendered.
<editor-menu-bar />
Here a menu bar will be rendered.
<editor-menu-bubble />
Here a menu bubble will be rendered.
<editor-floating-menu />
Here a floating menu will be rendered.
EditorMenuBar
The <editor-menu-bar />
component is renderless and will receive some properties through a scoped slot.
commands
Array
A list of all commands.
isActive
Object
An object of functions to check if your selected text is a node or mark. `isActive.{node
getMarkAttrs
Function
A function to get all mark attributes of your selection.
focused
Boolean
Whether the editor is focused.
focus
Function
A function to focus the editor.
Example
<template> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold"> Bold </button> <button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })"> H2 </button> </div> </editor-menu-bar> </template>
EditorMenuBubble
The <editor-menu-bubble />
component is renderless and will receive some properties through a scoped slot.
commands
Array
A list of all commands.
isActive
Object
An object of functions to check if your selected text is a node or mark. `isActive.{node
getMarkAttrs
Function
A function to get all mark attributes of your selection.
focused
Boolean
Whether the editor is focused.
focus
Function
A function to focus the editor.
menu
Object
An object for positioning your menu.
Example
<template> <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }"> <div :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`" > <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold"> Bold </button> <button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })"> H2 </button> </div> </editor-menu-bubble> </template>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK