2023 May 05 Archive - EXEIdeas – Let's Your Mind Rock

This JavaScript code snippet helps you to create a simple WYSIWYG-rich text editor with all basic commands. It is purely built with HTML5, CSS, and JavaScript without using an additional library or framework. This text editor allows users to apply bold, italic, underline, and deleted formats to the text. Similarly, users can create lists, headings, and links and apply text indent and alignments.You can easily integrate this text editor into your web/app project to allow users to create formatted text. The interface of the WYSIWYG text editor can be customized with additional CSS according to your needs.There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.CLICK HERE TO SEE DEMOFeatures:Light Weight.Pure JavaScript.Cross Browser.No External Files.Fully Customizable.Responsive.How To Add Simple WYSIWYG Rich Text Editor Using Pure JavaScript?Here is the complete code to recognize speech using JavaScript code. There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.HTML: Welcome to my WYSIWYG Editor (What you see is what you get) !

It's only made of HTML5 , CSS3 and pure JavaScript , no framework !

See for yourself! 😃

Tutorial available here ! 😋

✖ Insert Link Open in new Tab? Done CSS:/* WYSIWYG Editor */.wp-webdeasy-comment-editor { background: #fff; width: 40rem; min-height: 18rem; box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3); border-top: 6px solid #4a4a4a; border-radius: 3px; margin: 2rem auto;}.wp-webdeasy-comment-editor .toolbar { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);}.wp-webdeasy-comment-editor .toolbar .line { display: flex; border-bottom: 1px solid #e2e2e2;}.wp-webdeasy-comment-editor .toolbar .line:last-child { border-bottom: none;}.wp-webdeasy-comment-editor .toolbar .line .box { display: flex; border-left: 1px solid #e2e2e2;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn { display: block; display: flex; align-items: center; justify-content: center; position: relative; transition: 0.2s ease all;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn:hover, .wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.active { background-color: #e1e1e1; cursor: pointer;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon img { width: 15px; padding: 9px; box-sizing: content-box;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.icon.smaller img { width: 16px;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu { width: 20px; padding: 0 10px;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu::after { content: ""; width: 6px; height: 6px; position: absolute; background-image: url(https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png); background-repeat: no-repeat; background-size: cover; background-position: center; right: 4px;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu { display: none; position: absolute; top: 34px; left: -1px; z-index: 10; background-color: #FFF; border: 1px solid #b5b5b5; border-top: none;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu .btn { width: 39px;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu .submenu:hover { display: block;}.wp-webdeasy-comment-editor .toolbar .line .box .editor-btn.has-submenu:hover .submenu { display: block;}.wp-webdeasy-comment-editor .content-area { padding: 15px 12px; line-height: 1.5;}.wp-webdeasy-comment-editor .content-area .visuell-view { outline: none; min-height: 12rem;}.wp-webdeasy-comment-editor .content-area .visuell-view p { margin: 12px 0;}.wp-webdeasy-comment-editor .content-area .html-view { outline: none; display: none; width: 100%; height: 200px; border: none; resize: none;}/* Modal */.modal { z-index: 40; display: none;}.modal .modal-wrapper { background-color: #FFF; padding: 1rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20rem; min-height: 10rem; z-index: 41;}.modal .modal-wrapper .close { position: absolute; top: 1rem; right: 1rem; cursor: pointer;}.modal .modal-wrapper .modal-content { flex-direction: column;}.modal .modal-wrapper .modal-content h3 { margin-top: 0;}.modal .modal-wrapper .modal-content input { margin: 1rem 0; padding: 0.5rem;}.modal .modal-wrapper .modal-content input[type=text] { width: calc(100% - 1rem);}.modal .modal-wrapper .modal-content .row label { margin-left: 0.5rem;}.modal .modal-wrapper .modal-content button { background-color: #D2434F; border: 0; color: #FFF; padding: 0.5rem 1.2rem; cursor: pointer;}.modal .modal-bg { position: fixed; background-color: rgba(0, 0, 0, 0.3); width: 100vw; height: 100vh; top: 0; left: 0;}JavaScript:// define varsconst editor = document.getElementsByClassName('wp-webdeasy-comment-editor')[0];const toolbar = editor.getElementsByClassName('toolbar')[0];const buttons = toolbar.querySelectorAll('.editor-btn:not(.has-submenu)');const contentArea = editor.getElementsByClassName('content-area')[0];const visuellView = contentArea.getElementsByClassName('visuell-view')[0];const htmlView = contentArea.getElementsByClassName('html-view')[0];const modal = document.getElementsByClassName('modal')[0];// add active tag eventdocument.addEventListener('selectionchange', selectionChange);// add paste eventvisuellView.addEventListener('paste', pasteEvent);// add paragraph tag on new linecontentArea.addEventListener('keypress', addParagraphTag);// add toolbar button actionsfor(let i = 0; i < buttons.length; i++) { let button = buttons[i]; button.addEventListener('click', function(e) { let action = this.dataset.action; switch(action) { case 'toggle-view': execCodeAction(this, editor); break; case 'createLink': execLinkAction(); break; default: execDefaultAction(action); } });}/** * This function toggles between visual and html view */function execCodeAction(button, editor) { if(button.classList.contains('active')) { // show visuell view visuellView.innerHTML = htmlView.value; htmlView.style.display = 'none'; visuellView.style.display = 'block'; button.classList.remove('active'); } else { // show html view htmlView.innerText = visuellView.innerHTML; visuellView.style.display = 'none'; htmlView.style.display = 'block'; button.classList.add('active'); }}/** * This function adds a link to the current selection */function execLinkAction() { modal.style.display = 'block'; let selection = saveSelection(); let submit = modal.querySelectorAll('button.done')[0]; let close = modal.querySelectorAll('.close')[0]; // done button active => add link submit.addEventListener('click', function(e) { e.preventDefault(); let newTabCheckbox = modal.querySelectorAll('#new-tab')[0]; let linkInput = modal.querySelectorAll('#linkValue')[0]; let linkValue = linkInput.value; let newTab = newTabCheckbox.checked; restoreSelection(selection); if(window.getSelection().toString()) { let a = document.createElement('a'); a.href = linkValue; if(newTab) a.target = '_blank'; window.getSelection().getRangeAt(0).surroundContents(a); } modal.style.display = 'none'; linkInput.value = ''; // deregister modal events submit.removeEventListener('click', arguments.callee); close.removeEventListener('click', arguments.callee); }); // close modal on X click close.addEventListener('click', function(e) { e.preventDefault(); let linkInput = modal.querySelectorAll('#linkValue')[0]; modal.style.display = 'none'; linkInput.value = ''; // deregister modal events submit.removeEventListener('click', arguments.callee); close.removeEventListener('click', arguments.callee); });}/** * This function executes all 'normal' actions */function execDefaultAction(action) { document.execCommand(action, false);}/** * Saves the current selection */function saveSelection() { if(window.getSelection) { sel = window.getSelection(); if(sel.getRangeAt && sel.rangeCount) { let ranges = []; for(var i = 0, len = sel.rangeCount; i < len; ++i) { ranges.push(sel.getRangeAt(i)); } return ranges; } } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } return null;}/** * Loads a saved selection */function restoreSelection(savedSel) { if(savedSel) { if(window.getSelection) { sel = window.getSelection(); sel.removeAllRanges(); for(var i = 0, len = savedSel.length; i < len; ++i) { sel.addRange(savedSel[i]); } } else if(document.selection && savedSel.select) { savedSel.select(); } }}/** * Sets the current selected format buttons active/inactive */ function selectionChange(e) { for(let i = 0; i < buttons.length; i++) { let button = buttons[i]; // don't remove active class on code toggle button if(button.dataset.action === 'toggle-view') continue; button.classList.remove('active'); } if(!childOf(window.getSelection().anchorNode.parentNode, editor)) return false; parentTagActive(window.getSelection().anchorNode.parentNode);}/** * Checks if the passed child has the passed parent */function childOf(child, parent) { return parent.contains(child);}/** * Sets the tag active that is responsible for the current element */function parentTagActive(elem) { if(!elem ||!elem.classList || elem.classList.contains('visuell-view')) return false; let toolbarButton; // active by tag names let tagName = elem.tagName.toLowerCase(); toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-tag-name="${tagName}"]`)[0]; if(toolbarButton) { toolbarButton.classList.add('active'); } // active by text-align let textAlign = elem.style.textAlign; toolbarButton = document.querySelectorAll(`.toolbar .editor-btn[data-style="textAlign:${textAlign}"]`)[0]; if(toolbarButton) { toolbarButton.classList.add('active'); } return parentTagActive(elem.parentNode);}/** * Handles the paste event and removes all HTML tags */function pasteEvent(e) { e.preventDefault(); let text = (e.originalEvent || e).clipboardData.getData('text/plain'); document.execCommand('insertHTML', false, text);}/** * This functions adds a paragraph tag when the enter key is pressed */function addParagraphTag(evt) { if (evt.keyCode == '13') { // don't add a p tag on list item if(window.getSelection().anchorNode.parentNode.tagName === 'LI') return; document.execCommand('formatBlock', false, 'p'); }}When we execute the above code in the browser, it shows up like this in the browser. It allows you to access your microphone to speak something.Customization:No need to customize it. Just copy-paste. Rest edit the code as per comments and need.Troubleshooting the Errors:Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.Final Words:That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.