viveEditor documentation
Documentation
Every step from adding viveEditor to your page to cleaning its HTML on the server. Examples use the packages’ real public API.
Getting started
- InstallationAdd viveEditor with one CDN script or from npm, pick the packages you need and load the right stylesheets.
- Your first editorTurn a textarea into an editor, mount one into any element, or build it from Editor.create and createUI, then read its HTML.
- FrameworksUse viveEditor in React, Vue, Svelte and Angular, or as a <vive-editor> form field, with notes for server rendering.
Features
- Toolbar and shortcutsThe floating toolbar, selection bubble, / menu, block menu, word count, readability score and every keyboard shortcut.
- Images and uploadsSet up the image extension, write the upload function, handle progress and abort, secure your server and track alt text.
- Video and audio embedsTurn YouTube, Vimeo and Spotify links into safe players, with the preview card, activateEmbeds, server checks and CSP settings.
- TablesTables with merged cells, header rows, column widths you can drag, and the table tools in the toolbar.
- Code blocksCode blocks with a language picker, the default language list and optional Shiki syntax colouring, including a setup without WebAssembly.
- Find and replaceFind and replace that matches Turkish capitals correctly, with match case, whole word and replace all options.
- Character limitCount characters and set a limit; typing stops at the limit, pasted text is trimmed and the toolbar shows how much is left.
- Open, save and printUse the File menu to open Word, Markdown, HTML and text files, save as Word, Markdown or HTML, and print the document.
- Paste from OfficeClean paste from Word, Google Docs and LibreOffice; fake bullets become real lists, and pasted Markdown text becomes formatted content.
Extras
- MentionsAdd @mentions with the Mention extension and mentionMenu, store checked ids, and verify every mention again on your server.
- EmojiAdd an emoji picker that opens on a colon, with a compact English emoji list that loads only on first use.
- Formulas (LaTeX)Write LaTeX formulas with MathExtension and your own KaTeX 0.18.2 or newer, then draw them on published pages with renderMath.
- FootnotesAdd footnotes that writers edit in place, then number them and list them at the end of published pages with renderFootnotes.
- TemplatesOffer ready-made content blocks in the slash menu with templateMenu; every template goes through the editor schema before it lands.
- AI assistantConnect the AI assistant to your own server through a provider function; answers are shown and inserted as plain text.
Server
Reference
- PackagesEvery viveEditor package, what it does, which entry points it has and where its public API report lives.
- Security and CSPHow viveEditor keeps unsafe markup out, why you sanitize again on the server, and the CSP settings the CDN script needs.
- AccessibilityHow viveEditor meets WCAG 2.2 AA, which keys control it, what screen readers hear, and what you still need to provide.
- VersioningHow viveEditor versions its packages before 1.0, what stays compatible, and why the CDN script needs an exact version.
- Frequently asked questionsShort answers about viveEditor's licence, setup, frameworks, safety, Word support, languages, extras and versions.
- TroubleshootingFixes for common viveEditor problems, from CDN add-ons that fail to load to refused files, blocked players and sanitizer errors.