# AngularEditor: a contenteditable WYSIWYG editor for Angular with Markdown and sanitization > AngularEditor is a native rich text editor component for Angular 20 and later, built on contenteditable rather than a wrapper around a browser editor, with Markdown import and export, DOMPurify sanitization and a toolbar you can shape through config. The version matrix is broad, down to Angular 7. **kolkov/angular-editor** — Native WYSIWYG/Rich Text editor for Angular 20+ with Markdown support, custom sanitization, and reactive toolbar - Repository: https://github.com/kolkov/angular-editor - Website: https://angular-editor.kolkov.ru - Stars: 721 · Forks: 352 - Language: TypeScript - License: MIT - Published: 2026-10-21 · Updated: 2026-10-21 · Language: en - Canonical page: https://hysenlabs.com/projects/kolkov-angular-editor ## A native contenteditable surface, not a wrapped editor framework AngularEditor is described as a simple native WYSIWYG and rich text editor for Angular 20+, and the topics list the mechanism: contenteditable. That is the design decision with consequences. There is no ProseMirror or Quill document model underneath, so the value flowing in and out of the component is HTML, and everything the editor offers is built on top of the browser's own editing behaviour and the document.execCommand family. The upside is a very small dependency footprint and no framework-shaped document tree to fight. The downside is that the quality of the editing experience is bounded by what the browser provides, and by the fact that execCommand is a deprecated API with uneven support, which is why the custom button mechanism described later in the README exists at all. The editor does not attempt to be a word processor; it is a form field that happens to be rich. ## The version matrix is long, and you pick the line that matches your Angular The README lays out the compatibility history in detail, which is useful because the package is published under one name across several Angular generations. The 3.1.x line targets Angular v20, v21 and v22 and adds CSS variables, SVG icons and Vitest testing. The 3.0.x line covers Angular v20 and v21 with CSS variables and modern Angular. Version 2.0.0 and above serves Angular 13 to 19, 1.0.0 and above serves Angular 8 to 12, 0.18.4 and above serves Angular 7, and the 0.15.x line was for Angular 6. The current line also states its requirements explicitly: Angular 20.0.0 or higher, RxJS 7.8.0 or higher, and TypeScript 5.6 or newer for Angular 20 and 21 or 6.0 or newer for Angular 22. The README warns that alpha and beta versions may contain breaking changes, so the latest is not always the safest thing to pin in a production application. ## Markdown runs in both directions, with marked and turndown The dependency list explains the Markdown support: marked at 18.0.14 parses Markdown into HTML, and turndown at 7.2.4 converts HTML back into Markdown. So the editor can take Markdown as input and produce HTML for the DOM, and take the edited HTML and produce Markdown as output. That is what makes it usable in a content workflow where the stored format is Markdown but the editing surface is rich text, which is the common case for static site generators and documentation tools. The Markdown side is tested separately from the rest of the library, with a dedicated script, and the CI script runs both the Angular test suite with coverage and the Markdown tests in the same step. Having the Markdown conversion under its own test target rather than folded into the component tests is a small sign of how the author expects that part of the library to change. ```json "test:markdown": "vitest run projects/angular-editor/markdown/", "test-ci": "ng test angular-editor --coverage && vitest run projects/angular-editor/markdown/", ``` ## Sanitization is a config flag, not a guarantee dompurify at 3.4.16 is a runtime dependency, and the config object exposes a sanitize flag. That flag is on by default in the example configuration, and the project description mentions custom sanitization. The important thing to understand is what the flag does and does not do. Sanitizing means the HTML is passed through DOMPurify before it is used, which strips dangerous constructs. It does not mean the output is a document model you can trust structurally, because the component's contract is HTML in and HTML out, and the caller decides what to do with that string. If you store the result, you are storing sanitized HTML, and if you later re-render it somewhere else, that is a second decision. The same caveat applies to the custom classes and font classes you declare: the editor will happily apply a class name you give it, and the class name is your responsibility. ## Everything about the toolbar lives in one config object The AngularEditorConfig object is the centre of the library, and the README's example shows how much sits in it. There are editing flags such as editable, spellcheck and translate, sizing fields for height, minHeight, maxHeight, width and minWidth, and toolbar flags for enableToolbar, showToolbar and toolbarPosition, which is set to top in the example. There is a placeholder, and three default-value fields for paragraph separator, font name and font size. You list fonts as objects with a class and a name, and custom classes as objects with a name, a class, and optionally a tag, which is how a custom class can be applied to an h1 element. There is an uploadUrl and an upload callback for images, a flag for uploading with credentials, and toolbarHiddenButtons, which takes arrays of button names, so hiding bold and italic is a pair in one group and font size is a group of one. The reactive toolbar reacts to the selection, and the config is where you shape what appears. ## Custom buttons call execCommand through a template variable If the default toolbar is not enough, you can add your own buttons, and the mechanism is worth understanding because it shows the limits of the design. The README says custom buttons are defined with custom actions using executeCommandFn, and that it accepts commands from the browser's execCommand. The first argument is the command name and the second is a value argument. The example adds the Angular editor logo into the editor by calling executeCommandFn with insertHtml and an SVG string. The button is declared inside an ng-template with a let binding that captures the executeCommandFn function, and the template is placed inside the angular-editor element. ```html