diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md index 4ed50ae..971bd9d 100644 --- a/docs/api/methods/get-value.md +++ b/docs/api/methods/get-value.md @@ -18,13 +18,14 @@ getValue(encoder?: any): string; ### Parameters -- `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text` +- `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default), `text`, and `markdown` You can get the required encoder in the following way: ```jsx -const toTextEncoder = richtext.text.toText; // text encoder -const toHTMLEncoder = richtext.html.toHTML; // html encoder +const toTextEncoder = richtext.text.toText; // text encoder +const toHTMLEncoder = richtext.html.toHTML; // html encoder +const toMarkdownEncoder = richtext.markdown.toMarkdown; // markdown encoder ``` ### Example diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md index 5d40f94..29ff858 100644 --- a/docs/api/methods/set-value.md +++ b/docs/api/methods/set-value.md @@ -19,13 +19,14 @@ setValue: (value: string, encoder?: any): void; ### Parameters - `value` - (required) a value to be inserted into the RichText -- `encoder` - (optional) a custom parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text` +- `encoder` - (optional) a custom parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default), `text`, and `markdown` You can get the required encoder in the following way: ```jsx -const fromTextEncoder = richtext.text.fromText; // text encoder -const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown encoder ``` ### Example diff --git a/docs/index.md b/docs/index.md index d6a84fe..abc4e40 100644 --- a/docs/index.md +++ b/docs/index.md @@ -13,7 +13,7 @@ description: You can have an overview of DHTMLX JavaScript RichText library in t - Two [**layout modes**](api/config/layout-mode.md) -- Content serialization to both plain text and HTML +- Content serialization to HTML, plain text, and Markdown - Configurable [**toolbar**](api/config/toolbar.md) with built-in and custom buttons @@ -71,7 +71,7 @@ DHTMLX RichText can work with content in "classic" and "document" modes. You can ## Supported formats -The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML** and plain text formats. +The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML**, **plain text**, and **Markdown** formats. #### HTML format @@ -85,6 +85,26 @@ The RichText editor supports [parsing](api/methods/set-value.md) and [serializat ![Text format](./assets/richtext/text_format.png) +#### Markdown format + +Pass the built-in `markdown` encoders to [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) to load or serialize content as Markdown: + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "# Hello\n\nSome **bold** text", +}); + +// load Markdown into the editor +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// read editor content as Markdown +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note +Markdown support covers a limited subset of the syntax — common block and inline elements such as headings, paragraphs, line breaks, emphasis, blockquotes, lists, and links. Formatting that has no Markdown equivalent (font family, font size, colors, alignment, line height) is dropped on serialization. +::: + ## Keyboard shortcuts The RichText editor supports a set of common keyboard shortcuts for faster formatting and editing. The shortcuts follow platform conventions and are available on both **Windows/Linux** (`Ctrl`) and **macOS** (`⌘`).