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: 2px; 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; if(editable) $elEditor.focus(); let label = editable ? "Disable Editor" : "Enable Editor"; e.currentTarget.textContent = label; }); });
Console
expand_less
License
License
by DevDic
Close