WYSIWYG text editor<\/a> can be customized with additional CSS according to your needs.<\/p>\nHow to Create Simple WYSIWYG Editor using JavaScript<\/h2>\n
1. First of all, create the HTML structure as follows:<\/p>\n
<div class=\"wp-webdeasy-comment-editor\">\r\n <div class=\"toolbar\">\r\n <div class=\"line\">\r\n \r\n <div class=\"box\">\r\n <span class=\"editor-btn icon smaller\" data-action=\"bold\" data-tag-name=\"b\" title=\"Bold\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/bold.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon smaller\" data-action=\"italic\" data-tag-name=\"i\" title=\"Italic\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/italic.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon smaller\" data-action=\"underline\" data-tag-name=\"u\" title=\"Underline\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/underline.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon smaller\" data-action=\"strikeThrough\" data-tag-name=\"strike\" title=\"Strike through\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/30\/000000\/strikethrough.png\"\/>\r\n <\/span>\r\n <\/div>\r\n \r\n <div class=\"box\">\r\n <span class=\"editor-btn icon has-submenu\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/align-left.png\"\/>\r\n <div class=\"submenu\">\r\n <span class=\"editor-btn icon\" data-action=\"justifyLeft\" data-style=\"textAlign:left\" title=\"Justify left\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/align-left.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"justifyCenter\" data-style=\"textAlign:center\" title=\"Justify center\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/align-center.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"justifyRight\" data-style=\"textAlign:right\" title=\"Justify right\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/align-right.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"formatBlock\" data-style=\"textAlign:justify\" title=\"Justify block\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/align-justify.png\"\/>\r\n <\/span>\r\n <\/div>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"insertOrderedList\" data-tag-name=\"ol\" title=\"Insert ordered list\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/numbered-list.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"insertUnorderedList\" data-tag-name=\"ul\" title=\"Insert unordered list\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/bulleted-list.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"outdent\" title=\"Outdent\" data-required-tag=\"li\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/outdent.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"indent\" title=\"Indent\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/indent.png\"\/>\r\n <\/span>\r\n \r\n <\/div>\r\n <div class=\"box\">\r\n <span class=\"editor-btn icon\" data-action=\"insertHorizontalRule\" title=\"Insert horizontal rule\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/horizontal-line.png\"\/>\r\n <\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"line\">\r\n \r\n <div class=\"box\">\r\n <span class=\"editor-btn icon smaller\" data-action=\"undo\" title=\"Undo\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/undo--v1.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon\" data-action=\"removeFormat\" title=\"Remove format\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/remove-format.png\"\/>\r\n <\/span>\r\n <\/div>\r\n \r\n <div class=\"box\">\r\n <span class=\"editor-btn icon smaller\" data-action=\"createLink\" title=\"Insert Link\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/add-link.png\"\/>\r\n <\/span>\r\n <span class=\"editor-btn icon smaller\" data-action=\"unlink\" data-tag-name=\"a\" title=\"Unlink\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/delete-link.png\"\/>\r\n <\/span>\r\n <\/div>\r\n \r\n <div class=\"box\">\r\n <span class=\"editor-btn icon\" data-action=\"toggle-view\" title=\"Show HTML-Code\">\r\n <img src=\"https:\/\/img.icons8.com\/fluency-systems-filled\/48\/000000\/source-code.png\"\/>\r\n <\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <div class=\"content-area\">\r\n <div class=\"visuell-view\" contenteditable>\r\n <p style=\"text-align: center;\">Welcome to my <b>WYSIWYG<\/b> Editor <i>(What you see is what you get)<\/i>!<\/p>\r\n <p style=\"text-align: center;\">It's only made of <u>HTML5<\/u>, <i><u>CSS3<\/u> <\/i>and pure <u>JavaScript<\/u>, <strike>no framework<\/strike>!<\/p>\r\n <hr>\r\n <p style=\"text-align: center;\"><b>See for yourself! 😃<\/b><\/p>\r\n <p style=\"text-align: center;\"><b>Tutorial available <a href=\"https:\/\/webdeasy.de\/en\/program-your-own-wysiwyg-editor-in-10-minutes\/?referer=cp-YoVmBx\">here<\/a>! 😋<\/b><\/p>\r\n <\/div>\r\n <textarea class=\"html-view\"><\/textarea>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"modal\">\r\n <div class=\"modal-bg\"><\/div>\r\n <div class=\"modal-wrapper\">\r\n <div class=\"close\">✖<\/div>\r\n <div class=\"modal-content\" id=\"modalCreateLink\">\r\n <h3>Insert Link<\/h3>\r\n <input type=\"text\" id=\"linkValue\" placeholder=\"Link (example: https:\/\/webdeasy.de\/)\">\r\n <div class=\"row\">\r\n <input type=\"checkbox\" id=\"new-tab\">\r\n <label for=\"new-tab\">Open in new Tab?<\/label>\r\n <\/div>\r\n <button class=\"done\">Done<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n2. After that, add the following CSS styles to your project.<\/p>\n
\/* WYSIWYG Editor *\/\r\n.wp-webdeasy-comment-editor {\r\n background: #fff;\r\n width: 40rem;\r\n min-height: 18rem;\r\n box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);\r\n border-top: 6px solid #4a4a4a;\r\n border-radius: 3px;\r\n margin: 2rem auto;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar {\r\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line {\r\n display: flex;\r\n border-bottom: 1px solid #e2e2e2;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line:last-child {\r\n border-bottom: none;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box {\r\n display: flex;\r\n border-left: 1px solid #e2e2e2;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn {\r\n display: block;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n transition: 0.2s ease all;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn:hover, .wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.active {\r\n background-color: #e1e1e1;\r\n cursor: pointer;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon img {\r\n width: 15px;\r\n padding: 9px;\r\n box-sizing: content-box;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon.smaller img {\r\n width: 16px;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu {\r\n width: 20px;\r\n padding: 0 10px;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu::after {\r\n content: \"\";\r\n width: 6px;\r\n height: 6px;\r\n position: absolute;\r\n background-image: url(https:\/\/img.icons8.com\/ios-glyphs\/30\/000000\/chevron-down.png);\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n right: 4px;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu {\r\n display: none;\r\n position: absolute;\r\n top: 34px;\r\n left: -1px;\r\n z-index: 10;\r\n background-color: #FFF;\r\n border: 1px solid #b5b5b5;\r\n border-top: none;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu .btn {\r\n width: 39px;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu:hover {\r\n display: block;\r\n}\r\n.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu:hover .submenu {\r\n display: block;\r\n}\r\n.wp-webdeasy-comment-editor .content-area {\r\n padding: 15px 12px;\r\n line-height: 1.5;\r\n}\r\n.wp-webdeasy-comment-editor .content-area .visuell-view {\r\n outline: none;\r\n min-height: 12rem;\r\n}\r\n.wp-webdeasy-comment-editor .content-area .visuell-view p {\r\n margin: 12px 0;\r\n}\r\n.wp-webdeasy-comment-editor .content-area .html-view {\r\n outline: none;\r\n display: none;\r\n width: 100%;\r\n height: 200px;\r\n border: none;\r\n resize: none;\r\n}\r\n\r\n\/* Modal *\/\r\n.modal {\r\n z-index: 40;\r\n display: none;\r\n}\r\n.modal .modal-wrapper {\r\n background-color: #FFF;\r\n padding: 1rem;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 20rem;\r\n min-height: 10rem;\r\n z-index: 41;\r\n}\r\n.modal .modal-wrapper .close {\r\n position: absolute;\r\n top: 1rem;\r\n right: 1rem;\r\n cursor: pointer;\r\n}\r\n.modal .modal-wrapper .modal-content {\r\n flex-direction: column;\r\n}\r\n.modal .modal-wrapper .modal-content h3 {\r\n margin-top: 0;\r\n}\r\n.modal .modal-wrapper .modal-content input {\r\n margin: 1rem 0;\r\n padding: 0.5rem;\r\n}\r\n.modal .modal-wrapper .modal-content input[type=text] {\r\n width: calc(100% - 1rem);\r\n}\r\n.modal .modal-wrapper .modal-content .row label {\r\n margin-left: 0.5rem;\r\n}\r\n.modal .modal-wrapper .modal-content button {\r\n background-color: #D2434F;\r\n border: 0;\r\n color: #FFF;\r\n padding: 0.5rem 1.2rem;\r\n cursor: pointer;\r\n}\r\n.modal .modal-bg {\r\n position: fixed;\r\n background-color: rgba(0, 0, 0, 0.3);\r\n width: 100vw;\r\n height: 100vh;\r\n top: 0;\r\n left: 0;\r\n}<\/pre>\n3. Finally, add the following JavaScript code and done.<\/p>\n
\/\/ define vars\r\nconst editor = document.getElementsByClassName('wp-webdeasy-comment-editor')[0];\r\nconst toolbar = editor.getElementsByClassName('toolbar')[0];\r\nconst buttons = toolbar.querySelectorAll('.editor-btn:not(.has-submenu)');\r\nconst contentArea = editor.getElementsByClassName('content-area')[0];\r\nconst visuellView = contentArea.getElementsByClassName('visuell-view')[0];\r\nconst htmlView = contentArea.getElementsByClassName('html-view')[0];\r\nconst modal = document.getElementsByClassName('modal')[0];\r\n\r\n\/\/ add active tag event\r\ndocument.addEventListener('selectionchange', selectionChange);\r\n\r\n\/\/ add paste event\r\nvisuellView.addEventListener('paste', pasteEvent);\r\n\r\n\/\/ add paragraph tag on new line\r\ncontentArea.addEventListener('keypress', addParagraphTag);\r\n\r\n\/\/ add toolbar button actions\r\nfor(let i = 0; i < buttons.length; i++) {\r\n let button = buttons[i];\r\n \r\n button.addEventListener('click', function(e) {\r\n let action = this.dataset.action;\r\n \r\n switch(action) {\r\n case 'toggle-view':\r\n execCodeAction(this, editor);\r\n break;\r\n case 'createLink':\r\n execLinkAction();\r\n break;\r\n default:\r\n execDefaultAction(action);\r\n }\r\n \r\n });\r\n}\r\n\r\n\/** \r\n * This function toggles between visual and html view\r\n *\/\r\nfunction execCodeAction(button, editor) {\r\n\r\n if(button.classList.contains('active')) { \/\/ show visuell view\r\n visuellView.innerHTML = htmlView.value;\r\n htmlView.style.display = 'none';\r\n visuellView.style.display = 'block';\r\n\r\n button.classList.remove('active'); \r\n } else { \/\/ show html view\r\n htmlView.innerText = visuellView.innerHTML;\r\n visuellView.style.display = 'none';\r\n htmlView.style.display = 'block';\r\n\r\n button.classList.add('active'); \r\n }\r\n}\r\n\r\n\/**\r\n * This function adds a link to the current selection\r\n *\/\r\nfunction execLinkAction() { \r\n modal.style.display = 'block';\r\n let selection = saveSelection();\r\n\r\n let submit = modal.querySelectorAll('button.done')[0];\r\n let close = modal.querySelectorAll('.close')[0];\r\n \r\n \/\/ done button active => add link\r\n submit.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n let newTabCheckbox = modal.querySelectorAll('#new-tab')[0];\r\n let linkInput = modal.querySelectorAll('#linkValue')[0];\r\n let linkValue = linkInput.value;\r\n let newTab = newTabCheckbox.checked; \r\n \r\n restoreSelection(selection);\r\n \r\n if(window.getSelection().toString()) {\r\n let a = document.createElement('a');\r\n a.href = linkValue;\r\n if(newTab) a.target = '_blank';\r\n window.getSelection().getRangeAt(0).surroundContents(a);\r\n }\r\n\r\n modal.style.display = 'none';\r\n linkInput.value = '';\r\n \r\n \/\/ deregister modal events\r\n submit.removeEventListener('click', arguments.callee);\r\n close.removeEventListener('click', arguments.callee);\r\n }); \r\n \r\n \/\/ close modal on X click\r\n close.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n let linkInput = modal.querySelectorAll('#linkValue')[0];\r\n \r\n modal.style.display = 'none';\r\n linkInput.value = '';\r\n \r\n \/\/ deregister modal events\r\n submit.removeEventListener('click', arguments.callee);\r\n close.removeEventListener('click', arguments.callee);\r\n });\r\n}\r\n\r\n\/**\r\n * This function executes all 'normal' actions\r\n *\/\r\nfunction execDefaultAction(action) {\r\n document.execCommand(action, false);\r\n}\r\n\r\n\/**\r\n * Saves the current selection\r\n *\/\r\nfunction saveSelection() {\r\n if(window.getSelection) {\r\n sel = window.getSelection();\r\n if(sel.getRangeAt && sel.rangeCount) {\r\n let ranges = [];\r\n for(var i = 0, len = sel.rangeCount; i < len; ++i) {\r\n ranges.push(sel.getRangeAt(i));\r\n }\r\n return ranges;\r\n }\r\n } else if (document.selection && document.selection.createRange) {\r\n return document.selection.createRange();\r\n }\r\n return null;\r\n}\r\n\r\n\/**\r\n * Loads a saved selection\r\n *\/\r\nfunction restoreSelection(savedSel) {\r\n if(savedSel) {\r\n if(window.getSelection) {\r\n sel = window.getSelection();\r\n sel.removeAllRanges();\r\n for(var i = 0, len = savedSel.length; i < len; ++i) {\r\n sel.addRange(savedSel[i]);\r\n }\r\n } else if(document.selection && savedSel.select) {\r\n savedSel.select();\r\n }\r\n }\r\n}\r\n\r\n\/**\r\n * Sets the current selected format buttons active\/inactive\r\n *\/ \r\nfunction selectionChange(e) {\r\n \r\n for(let i = 0; i < buttons.length; i++) {\r\n let button = buttons[i];\r\n \r\n \/\/ don't remove active class on code toggle button\r\n if(button.dataset.action === 'toggle-view') continue;\r\n \r\n button.classList.remove('active');\r\n }\r\n \r\n if(!childOf(window.getSelection().anchorNode.parentNode, editor)) return false;\r\n \r\n parentTagActive(window.getSelection().anchorNode.parentNode);\r\n}\r\n\r\n\/**\r\n * Checks if the passed child has the passed parent\r\n *\/\r\nfunction childOf(child, parent) {\r\n return parent.contains(child);\r\n}\r\n\r\n\/**\r\n * Sets the tag active that is responsible for the current element\r\n *\/\r\nfunction parentTagActive(elem) {\r\n if(!elem ||!elem.classList || elem.classList.contains('visuell-view')) return false;\r\n \r\n let toolbarButton;\r\n \r\n \/\/ active by tag names\r\n let tagName = elem.tagName.toLowerCase();\r\n toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-tag-name=\"${tagName}\"]`)[0];\r\n if(toolbarButton) {\r\n toolbarButton.classList.add('active');\r\n }\r\n \r\n \/\/ active by text-align\r\n let textAlign = elem.style.textAlign;\r\n toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-style=\"textAlign:${textAlign}\"]`)[0];\r\n if(toolbarButton) {\r\n toolbarButton.classList.add('active');\r\n }\r\n \r\n return parentTagActive(elem.parentNode);\r\n}\r\n\r\n\/**\r\n * Handles the paste event and removes all HTML tags\r\n *\/\r\nfunction pasteEvent(e) {\r\n e.preventDefault();\r\n \r\n let text = (e.originalEvent || e).clipboardData.getData('text\/plain');\r\n document.execCommand('insertHTML', false, text);\r\n}\r\n\r\n\/**\r\n * This functions adds a paragraph tag when the enter key is pressed\r\n *\/\r\nfunction addParagraphTag(evt) {\r\n if (evt.keyCode == '13') {\r\n \r\n \/\/ don't add a p tag on list item\r\n if(window.getSelection().anchorNode.parentNode.tagName === 'LI') return;\r\n document.execCommand('formatBlock', false, 'p');\r\n }\r\n}<\/pre>\nThat’s all! hopefully, you have successfully integrated this WYSIWYG text editor code snippet into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet helps you to create a simple WYSIWYG rich text editor with all basic commands.\u00a0 It is…<\/p>\n","protected":false},"author":1,"featured_media":6369,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[224],"class_list":["post-6363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input","tag-text-editor"],"acf":[],"yoast_head":"\n
Simple WYSIWYG Editor using JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple WYSIWYG Editor using JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:44:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple WYSIWYG Editor using JavaScript\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\"},\"wordCount\":170,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png\",\"keywords\":[\"Text Editor\"],\"articleSection\":[\"Text & Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\",\"url\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\",\"name\":\"Simple WYSIWYG Editor using JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:44:19+00:00\",\"description\":\"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png\",\"width\":1280,\"height\":960,\"caption\":\"Simple WYSIWYG Editor using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text & Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple WYSIWYG Editor using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple WYSIWYG Editor using JavaScript — CodeHim","description":"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Simple WYSIWYG Editor using JavaScript — CodeHim","og_description":"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.","og_url":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:44:19+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple WYSIWYG Editor using JavaScript","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:19+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/"},"wordCount":170,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png","keywords":["Text Editor"],"articleSection":["Text & Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/","url":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/","name":"Simple WYSIWYG Editor using JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:44:19+00:00","description":"Here is a lightweight JavaScript code snippet to create simple WYSIWYG rich text editor. You can view demo and download code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/04\/www.codehim-3.png","width":1280,"height":960,"caption":"Simple WYSIWYG Editor using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/simple-wysiwyg-editor-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text & Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Simple WYSIWYG Editor using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":6146,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6363"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6369"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}