Editor instance

Working with the underlying Tiptap editor — commands, content and events.

<EchoEditor> exposes the Tiptap Editor. Grab it from the create event or a template ref (see Configuration for all props and events).

Content

editor.getHTML()
editor.getJSON()
editor.getText()
editor.getMarkdown()                      // with the Markdown extension
editor.isEmpty

editor.commands.setContent('<p>New</p>')
editor.commands.setContent(json, { emitUpdate: false })
editor.commands.setContent('# Title', { contentType: 'markdown' })
editor.commands.clearContent()

Commands

Commands can be chained; focus() returns focus to the editor after a toolbar click:

editor.chain().focus().toggleBold().toggleItalic().run()
editor.can().toggleBold()                 // dry run — would it work?

Commands contributed by Echo Editor extensions:

CommandExtension
setFullscreen()Fullscreen
togglePreview()Preview
toggleSourceCode()SourceCode
toggleSpecialCharacter(), insertSpecialCharacter(char)SpecialCharacter
setSearchTerm(), setReplaceTerm(), nextSearchResult(), replace(), replaceAll() …FindAndReplace
exportDocument(format, filename?)Export
setImage(attrs), updateImage(attrs)Image
setVideo(attrs), updateVideo(attrs)Video
setCodeBlock(attrs?)CodeBlock
setTableCellBackground(color), unsetTableCellBackground()Table
setColumns(), setThreeColumns(), setFourColumns(), setLayout(layout)Columns
setIframe(attrs)Iframe
indent(), outdent()Indent
setLineHeight(value)LineHeight
setFontSize(size), unsetFontSize()FontSize

Plus every command from the underlying Tiptap extensions (toggleHeading, insertTable, setLink, setTextAlign, …).

Events

editor.on('update', ({ editor }) => {})
editor.on('selectionUpdate', ({ editor }) => {})
editor.on('transaction', ({ transaction }) => {})
editor.on('focus', ({ event }) => {})
editor.on('blur', ({ event }) => {})
editor.on('destroy', () => {})

Always remove listeners you add (editor.off(...)) when your component unmounts.

Reading state in Vue

editor.state is reactive, but reading it in a computed re-evaluates on every transaction. Prefer useEditorState.

Slash commands
Configure the "/" command menu and add your own commands.
Composables
useEditorState, useTheme, useLocale, useTiptapStore and useCollaborationUsers.