HtmlEditor

A WYSIWYG HTML editor component with support for visual and code editing modes, form integration, and extensive formatting capabilities.

Complete Editor Example

A fully-featured editor with all controls. Copy and paste this example to get started quickly:

<k-html-editor name="content">
  <!-- Text formatting -->
  <k-hec-group slot="toolbar-top">
    <k-hec-bold></k-hec-bold>
    <k-hec-italic></k-hec-italic>
    <k-hec-underline></k-hec-underline>
    <k-hec-strikethrough></k-hec-strikethrough>
  </k-hec-group>
  
  <!-- Inline code -->
  <k-hec-inline-code slot="toolbar-top"></k-hec-inline-code>
  
  <!-- Text style -->
  <k-hec-dropdown slot="toolbar-top">
    <k-icon slot="icon" src="..."></k-icon>
    <span slot="label">Text Style</span>
    <k-hec-format-block tag="p">Paragraph</k-hec-format-block>
    <k-hec-format-block tag="h1">Heading 1</k-hec-format-block>
    <k-hec-format-block tag="h2">Heading 2</k-hec-format-block>
    <k-hec-format-block tag="h3">Heading 3</k-hec-format-block>
    <k-hec-code-block></k-hec-code-block>
  </k-hec-dropdown>
  
  <!-- Lists -->
  <k-hec-group slot="toolbar-top">
    <k-hec-bullet-list></k-hec-bullet-list>
    <k-hec-number-list></k-hec-number-list>
  </k-hec-group>
  
  <!-- Alignment -->
  <k-hec-group slot="toolbar-top">
    <k-hec-align-left></k-hec-align-left>
    <k-hec-align-center></k-hec-align-center>
    <k-hec-align-right></k-hec-align-right>
    <k-hec-align-justify></k-hec-align-justify>
  </k-hec-group>
  
  <!-- Colors -->
  <k-hec-group slot="toolbar-top">
    <k-hec-text-color></k-hec-text-color>
    <k-hec-text-background-color></k-hec-text-background-color>
  </k-hec-group>
  
  <!-- Clear formatting -->
  <k-hec-clear-formatting slot="toolbar-top"></k-hec-clear-formatting>
  
  <!-- Link and table -->
  <k-hec-group slot="toolbar-top">
    <k-hec-create-link></k-hec-create-link>
    <k-hec-insert-table></k-hec-insert-table>
  </k-hec-group>
  
  <!-- Spacer and mode toggle -->
  <k-hec-spacer slot="toolbar-top"></k-hec-spacer>
  <k-hec-mode slot="toolbar-top"></k-hec-mode>
  
  <!-- Bottom toolbar stats -->
  <k-hec-word-count slot="toolbar-bottom"></k-hec-word-count>
  <k-hec-character-count slot="toolbar-bottom"></k-hec-character-count>
</k-html-editor>

JavaScript API Example

Use the editor without controls and interact with it programmatically using custom buttons and the JavaScript API:

<!-- Custom toolbar -->
<div>
  <button onclick="myEditor.bold()">Bold</button>
  <button onclick="myEditor.italic()">Italic</button>
  <button onclick="myEditor.unorderedList()">List</button>
  <button onclick="myEditor.setTextColor('#ff0000')">Red</button>
  <button onclick="insertHTML()">Insert</button>
  <button onclick="getContent()">Get Value</button>
</div>

<!-- Editor without controls -->
<k-html-editor id="myEditor"></k-html-editor>

<script>
  const myEditor = document.getElementById('myEditor');
  
  // Set initial content
  myEditor.setValue('<p>Select text and use the buttons above!</p>');
  
  function insertHTML() {
    myEditor.insertHTML('<p><b>Inserted content!</b></p>');
  }
  
  function getContent() {
    alert(myEditor.getValue());
  }
</script>

JavaScript Reference

Constructor

new HtmlEditor()

Extends ShadowComponent which extends LitElement.

Properties

name: String

The name attribute for form submission.

value: String

The HTML content of the editor. Can be get or set via JavaScript or HTML attribute.

mode: String

Current editing mode. Either 'visual' (WYSIWYG) or 'code' (raw HTML). Default: 'visual'

Methods

Mode Control

setMode(mode): this

Set the editing mode. Accepts 'visual' or 'code'.

toggleMode(): this

Toggle between visual and code modes.

Content Management

getValue(): String

Returns the current HTML content.

setValue(html): this

Sets the HTML content of the editor.

clear(): this

Clears all content from the editor.

Text Formatting

bold(): this

Applies bold formatting to the selected text.

italic(): this

Applies italic formatting to the selected text.

underline(): this

Applies underline formatting to the selected text.

strikethrough(): this

Applies strikethrough formatting to the selected text.

Lists

orderedList(): this

Creates or toggles an ordered (numbered) list.

unorderedList(): this

Creates or toggles an unordered (bulleted) list.

Text Alignment

alignLeft(): this

Aligns text to the left.

alignCenter(): this

Centers the text.

alignRight(): this

Aligns text to the right.

alignJustify(): this

Justifies the text.

Text Color

setTextColor(color): this

Sets the foreground color of selected text. Accepts any valid CSS color value (hex, rgb, color name).

removeTextColor(): this

Removes foreground color from selected text.

setTextBackgroundColor(color): this

Sets the background color of selected text. Accepts any valid CSS color value (hex, rgb, color name).

removeTextBackgroundColor(): this

Removes background color from selected text.

Formatting Control

removeFormat(): this

Removes all formatting from the selected text.

formatBlock(tag): this

Formats the current block with the specified HTML tag (e.g., 'h1', 'h2', 'h3', 'p', 'pre').

insertHTML(html): this

Inserts HTML at the current cursor position.

insertAtCursor(html): this

Alias for insertHTML().

insertTable(rows, columns, includeHeaders, cellData): this

Inserts an HTML table at the cursor position.

• rows - Number of rows to create
• columns - Number of columns to create
• includeHeaders - Boolean indicating whether to include header row (default: false)
• cellData - Optional 2D array of cell content. If provided, rows/columns are determined from array dimensions

insertElementAtCursor(element, selectAfter): this

Inserts a DOM element at the cursor position or replaces selection.

• element - DOM element to insert
• selectAfter - Boolean indicating whether to select the inserted element after insertion (default: true)

replaceSelectionWithElement(element, selectAfter): this

Replaces the current selection with a DOM element.

• element - DOM element to insert
• selectAfter - Boolean indicating whether to select the inserted element after replacement (default: true)

wrapSelection(before, after, savedSelection): this

Wraps the selected text with HTML tags. Handles complex cases like unwrapping existing tags and preventing nested pre tags.

• before - Opening HTML tag(s) to wrap with
• after - Closing HTML tag(s) to wrap with
• savedSelection - Optional previously saved selection text to use instead of current selection

Selection Management

getSelection(): Object | null

Returns an object containing information about the current selection: { text, html, range, selection }

getSelectedText(): String

Returns the plain text of the current selection.

getSelectedHTML(): String

Returns the HTML of the current selection.

setSelection(startNode, startOffset, endNode, endOffset): this

Programmatically sets the selection range.

selectAll(): this

Selects all content in the editor.

replaceSelection(html): this

Replaces the current selection with the provided HTML.

deleteSelection(): this

Deletes the currently selected content.

getValueWithSelectionMarkers(): Object

Returns the editor content with special Unicode markers indicating cursor position or selection boundaries. Useful for preserving selection state during content transformations.

Returns object with properties:

• html - HTML content with markers inserted
• hasCursor - Boolean indicating if cursor position is marked
• hasSelection - Boolean indicating if selection is marked
• cursorMarker - Unicode character used for cursor (\uFFF0)
• selectionStart - Unicode character for selection start (\uFFF1)
• selectionEnd - Unicode character for selection end (\uFFF2)
• selectedText - Plain text of the selection

setValueFromSelectionMarkers(html, markers): this

Sets editor content and restores cursor/selection from Unicode markers. Companion method to getValueWithSelectionMarkers().

• html - HTML content containing marker characters
• markers - Object with marker information (hasCursor, hasSelection, cursorMarker, selectionStart, selectionEnd)

Links and Media

createLink(url): this

Creates a hyperlink from the selected text.

unlink(): this

Removes hyperlink from the selected text.

insertImage(url): this

Inserts an image at the cursor position.

History

undo(): this

Undoes the last action.

redo(): this

Redoes the last undone action.

Events

change

Dispatched when the content changes. Event detail: { value: String }

mode-changed

Dispatched when the editing mode changes between 'visual' and 'code'. Event detail: { mode: String }