Forms
Web Editor
semantic HTMLHTML 콘텐츠를 가볍게 작성하는 contenteditable 기반 웹 에디터입니다.
Live example
Write content here. This HTML is ready before JavaScript loads.
<section class="static-editor web-editor" data-static-editor="rich"><div class="editor-toolbar" role="toolbar" aria-label="Web editor tools"><button type="button" data-editor-command="formatBlock" data-editor-value="p">P</button><button type="button" data-editor-command="formatBlock" data-editor-value="h2">H2</button><button type="button" data-editor-command="bold"><strong>B</strong></button><button type="button" data-editor-command="italic"><em>I</em></button><button type="button" data-editor-command="underline"><u>U</u></button><button type="button" data-editor-command="insertUnorderedList">List</button><button type="button" data-editor-command="insertOrderedList">1.</button><button type="button" data-editor-command="createLink">Link</button><button type="button" data-editor-command="insertImage">Image</button><button type="button" data-editor-command="insertVideo">Video</button><button type="button" data-editor-command="foreColor">Text color</button><button type="button" data-editor-command="hiliteColor">Highlight</button><button type="button" data-editor-action="delete-media">Delete media</button><button type="button" data-editor-command="undo">Undo</button><button type="button" data-editor-command="redo">Redo</button><button type="button" data-editor-command="removeFormat">Clear</button></div><div class="rich-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Web editor" data-editor-content><p>Write content here. This HTML is ready before JavaScript loads.</p></div><input type="hidden" name="content" data-editor-content-value><output class="editor-status" data-editor-status aria-live="polite">Ready</output></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
role=textbox와 aria-multiline을 제공하고 fallback HTML 또는 textarea를 포함해 JavaScript 없이도 원본 콘텐츠를 읽을 수 있습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->