The MarkupEditor supports WYSIWYG editing in a web view. The "source of truth" for the MarkupEditor is standard HTML, styled using standard CSS. The MarkupEditor is available as a web component with a toolbar and hot key bindings to access its editing functionality. The toolbar visibility and contents, as well as the key bindings, are configurable and extensible.
You or the consumers of your application need to edit more than just plain text. You want to be able to format and organize a document with headers, lists, links, images, and perhaps tables, but you do not want to do that using Markdown or require that the consumers of your app know anything about Markdown or HTML. The MarkupEditor is the solution. It can be used in any environment that supports a web view, from a browser to a mobile or desktop app.
Like Markdown, the MarkupEditor keeps the focus on what you're writing, with a minimum of distractions. Like Markdown, it supports just enough functionality to help you organize and format your writing to get your points across effectively. Unlike Markdown, the MarkupEditor's WYSIWYG approach means you always see what you're writing presented properly as you write it, instead of dealing with the distractions of composing text with embedded notations and the uncertainty of how that text is later translated to HTML and presented.
The MarkupEditor is available as a web component. In its simplest form:
<markup-editor><p>Hello, world!</p></markup-editor> <script src="markup-editor.js" type="module"></script>
Optional <markup-editor> element attributes provide extensive customization options and let you load HTML content from file. The default MarkupEditor toolbar enables features to...
Insert and edit links, images, and tables.
Set paragraph styles.
Add lists and indenting.
Set text formatting.
Search for text.
You can customize the toolbar visibility, contents, ordering, and the hotkey mapping.
Learn more about the MarkupEditor in the Resources section below or jump right into the Developer's Guide.
MarkupEditor Demo. Exercise all of the MarkupEditor features on a document containing all of the supported HTML elements. The demo includes a customized toolbar and the ability to watch the underlying HTML update as you edit.
Hello, world. Every project needs a "Hello, world!" demo to highlight the simplest possible case. Follow this link to see the page source or "view source" in your browser to see what's required to present "Hello, world!" in an editable HTML document.
Customization. This demo shows multiple <markup-editor> web components on a single page, one using defaults, and the other with a customized toolbar. It's a compact example of MarkupEditor customization.
Developer's Guide. Learn the details and capabilities behind customizing the toolbar and key mappings and the behavior of the MarkupEditor. Learn how your application or web site can communicate with the MarkupEditor to be able to save edited documents and react to changes as you edit. Learn about the architecture of the MarkupEditor and how to modify its code.
MarkupEditor API. The MarkupEditor API documentation is created JSDoc and serves as the formal definition of the public API.
Git repository. The "MarkupEditor base" project is used to support the demos, and is re-used by several different WYSIWYG editor projects.
Desktop MarkupEditor. A desktop app version of the MarkupEditor. You can edit, save, open other files, and create new files. The content provided in the Demo and Developer's Guide, was all edited entirely using the MarkupEditor desktop app.
Swift MarkupEditor.
Are you a Swift developer, looking for some of that WYSIWYG goodness? Check out
the Swift version. It re-uses the same MarkupEditor base project code loaded into
a WKWebView. It comes with Swift MarkupEditorView and MarkupEditorUIViews
that can be plugged into a SwiftUI or UIKit project, along with a SwiftUI-based toolbar.
The Swift project has been in use for years with an earlier version of what is now
formalized in the base project.
VSCode extension. Are you a VSCode user? One of the drivers for formalizing the MarkupEditor base project was to use it in a VSCode extension. That project is under active development.