Needless UI

Components

Rich text editor

Headings, lists, links and formats, with a toolbar and Markdown as you type.

Import

import-editor.ts
import { NuiEditor } from '@needless-ui/angular/editor';

NuiEditor

A rich text editor.

Selector
nui-editor
NameTypeDefaultDescription
valueTwo-waystring''The content, as HTML or Markdown; empty when there’s no text.
formatInput'html' | 'markdown''html'How the value is written.
toolsInputNuiEditorTool[]NUI_EDITOR_TOOLSThe toolbar’s buttons in order, | between groups.
label, labelledBy, describedByInputstringName and describe the content.
placeholderInputstringShown while it’s empty.
readonly, disabled, invalidInputbooleanfalseShows the content without editing; turns it off; marks it invalid.
labelsInputPartial<NuiEditorLabels>Every text it says, to translate.
runMethod(tool: NuiEditorTool) => voidRuns a toolbar command.
undo, redo, focusMethod() => voidUndoes, redoes, and moves focus into the text.

Helpers

Functions to convert documents.

NameTypeDefaultDescription
nuiEditorToHtml, nuiEditorToMarkdownMethod(doc) => stringWrite a document as HTML or Markdown.
nuiEditorFromHtml, nuiEditorFromMarkdownMethod(text, document?) => NuiEditorDocRead HTML or Markdown into a document, keeping what the editor can show.