simple wysiwyg editor [ source code ] This is a WYSIWYG text editor based HTML and JavaScript , we need to create them to execCommand () and div tag with content editable content attribute. <button onclick="document.execCommand('bold',false,null);">Bold</button> <button onclick="document.execCommand('createLink',false,null);">createLink</button> <button onclick="document.execCommand('undo',false,null);">undo</button> <button onclick="document.execCommand('redo',false,null);">redo</button> <button onclick="document.execCommand('insertOrderedList',false,null);">insertOrderedList</button> <button onclick="document.execCommand('copy',false,null);">copy</button> <button onclick="document.execCommand('cut',false,null);">cut</button> <button id="paste">Paste</button> <div style="border:1px solid; padding: 3px; width:100%; height:400px; background:white" id='input' contenteditable='true'> select some of this text and then hit one of the buttons above </div> <script> document.getElementById('paste').addEventListener('click', ()=>{ let pasteArea = document.getElementById('input'); navigator.clipboard.readText() .then((text)=>{ document.execCommand('insertText', false, text) }); }); </script> © 2025 Manajmnt code Share to : ☷✎ Related Responsive Multi-level dropdown menu with search barIn this code, I'm going to share with you a responsive multi-level dropdown with search bar, so we n… Read MoreShow and edit source code of div on button clicked like WYSIWYG editorTo make toggle between creation mode and code mode you need to create div tag with contenteditable a… Read MoreHow-to refresh specific tag without refresh page using JavaScriptin this code we learn how refresh body or specific tag after some time, to do this call the tag that… Read More Comments
Comments
Post a Comment
message