Skip to main content

DHTMLX RichText. Insert content at cursor example

Live example​

RichText can drop content in at the cursor from your own code. This demo has three buttons that insert an HTML link, a Markdown snippet, or plain text right where the caret sits. If text is selected, the insertion replaces it.

const widget = new richtext.Richtext("#richtext", { value });

function insertSample(format) {
    if (format === "markdown") {
        widget.insertValue("**bold** and *italic*", richtext.markdown.fromMarkdown);
    } else if (format === "text") {
        widget.insertValue(" plain text ", richtext.text.fromText);
    } else {
        widget.insertValue('<a href="https://dhtmlx.com" title="DHTMLX site">DHTMLX link</a>');
    }
}

// the inline onclick handlers need a global reference
window.insertSample = insertSample;

<!-- auxiliary controls for interacting with the sample -->
<link rel="stylesheet" href="https://snippet.dhtmlx.com/codebase/assets/css/auxiliary_controls.css">
<section class="dhx_sample-controls">
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="insertSample('html')">Insert HTML (Link)</button>
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="insertSample('markdown')">Insert Markdown</button>
  <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="insertSample('text')">Insert text</button>
</section>

<!-- component container -->
<div id="richtext" style="width: 100%; height: 100%;"></div>

<script>
const value = `
        <h2>Insert content at the cursor</h2>
        <p>Use the <b>insertValue()</b> method to add HTML, plain text, or Markdown right where the cursor is.</p>
        <ul>
            <li>Place the cursor anywhere and click a button above to insert content at that position.</li>
            <li>Select some text and click a button to replace the selection.</li>
            <li>Each insertion is a single history entry, so one Undo reverts it.</li>
        </ul>
    `;
</script>

Use case​

Use it when your app adds content into the editor, like a button that inserts a signature, a snippet picker, or a template that drops boilerplate at the caret. You call one method with the content and, if needed, an encoder that says which format the content is in. The demo wires this to three buttons, but you can trigger it from any control or from code. To make it yours, call insertValue() with your content, passing a from* encoder when the content is text or Markdown rather than HTML.

How to do this in your app​

  • Insert HTML: call widget.insertValue('<a href="...">link</a>'). With no encoder the content is treated as HTML.
  • Insert plain text: pass the text encoder, widget.insertValue(" plain text ", richtext.text.fromText).
  • Insert Markdown: the demo passes a Markdown parser, widget.insertValue("**bold**", richtext.markdown.fromMarkdown).
  • Replace a selection: if text is selected when you insert, the new content takes its place.

Good to know​

  • Insertion happens at the caret: the content lands wherever the cursor is, not at the end of the document.
  • The encoder sets the input format: no encoder means HTML; pass a from* encoder to insert text or Markdown.

API reference​

Additional resources​