Tiptap Rich Text Editor

After going through a few rich text editors, I have settled on Tiptap for what seems to be ease of use.

Node vs mark: A node is a content element part of a tree. One or multiple marks can provide inline formatting to specifics part of a node, like italics. Additionally, there are functionality extensions which add new capabilities to Tiptap.

Editor

Instance Configuration

Editor Settings

• extensions (required)
• content - prefills editor
• editable
• autofocus - see docs for options
• enableInputRules - an input rule automatically converts text like (c) into ©. Pass an array of extensions that support input rules made using addInputRules().
• enablePasteRules
• editorProps - enables advanced use cases by interfacing with prose mirror

Methods

Not to be confused with commands which only return true/false and change the state of the editor.

• can() - check to see if command or command chain can be executed
• chain() - create chain of commands
• destroy() - stops editor instance and unbinds all events
• getHTML()
• getJSON()
• getText()
• getAttributes() - get attributes of currently selected node
• isActive() - check if selected node is active
• setOptions() - update editor options
• setEditable()