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 comes 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.
MarkupEditor Demo. A demo of all of the elements supported by the MarkupEditor. 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.
Developer's Guide. Learn how to customize the toolbar and key mappings. Learn how to embed the MarkupEditor in a web site like this one and how to edit documents locally using the MarkupEditor. Learn about the architecture of the MarkupEditor and how to modify its code.
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, which also comes with a command line tool to open the MarkupEditor on any file. You can edit, save, open other files, and create new files. The content provided in the Demo, Developer's Guide, and API documents 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.