TAG
CSS
JavaScript
Result
Run
License
<button type="button" id="btn-seteditor">Enable Editor</button> <div id="editor" class="editor"></div>
.editor { width: 200px; height: 200px; border: 1px solid #CCC; outline: none; } .editor[contentEditable] { border-width: 5px; border-color: red; padding: 20px; }
window.addEventListener("DOMContentLoaded", () => { const $elBtn = document.getElementById("btn-seteditor"); const $elEditor = document.getElementById("editor"); let editable = false; $elBtn.addEventListener("click", e => { editable = !editable; $elEditor.contentEditable = editable; let label; if($elEditor.isContentEditable) { $elEditor.focus(); label = "Disable Editor"; } else label = "Enable Editor"; e.currentTarget.textContent = label; }); });
Console
expand_less
License
License
by DevDic
Close