Get and Set HTML of RichTextEditor

  • To retrieve the editor HTML, call the editor.getHTMLCode method of the editor instance.
  • The editor.setHTMLCode method can be used to set the Html when the editor is first displayed.
  • The editor.getPlainTextmethod returns the editor's text without HTML markup.
  • Colours come back as rgb(153, 204, 0)by default — the browser normalises the picked value when the style is read back. This demo sets htmlcode_forcehexformat: true so they come back as #99cc00 instead. See HTML output formatting.

Editor output

Choose an output format to inspect the current editor content.

Example code

<div id="div_editor1"></div>
<script>
    var editor1 = new RichTextEditor("#div_editor1", { htmlcode_forcehexformat: true });

    editor1.setHTMLCode("<p><b>Hello</b> World</p><p>Click the button below to show this HTML code</p>");

    function showOutput(label, value) {
        document.querySelector("#editor_output_label").textContent = label;
        document.querySelector("#editor_output").textContent = value;
    }
    function btngetHTMLCode() {
        showOutput("HTML output", editor1.getHTMLCode())
    }

    function btnsetHTMLCode() {
        editor1.setHTMLCode("<h1>editor1.setHTMLCode() sample</h1><p>You clicked the setHTMLCode button at " + new Date() + "</p>")
    }
    function btngetPlainText() {
        showOutput("Plain-text output", editor1.getPlainText())
    }
</script>
<div class="content-space-1">
    <button class="ls-secondary" onclick="btngetHTMLCode();return false;">Get HTML code</button>
    <button class="ls-cta" onclick="btnsetHTMLCode();return false;">Set HTML code</button>
    <button class="ls-secondary" onclick="btngetPlainText();return false;">Get plain text</button>
</div>
<h3 id="editor_output_label">Editor output</h3>
<pre id="editor_output" role="status" aria-live="polite">Choose an output format.</pre>