How to create html source code with syntax highlighting [no library]

https://manajmnt-code.blogspot.com/2021/05/how-to-create-html-code-editor-with.html

In this code i will be share with you how to create html code editor with:

syntax hightligh;

button to run code in iframe;

button to copy to clipbord

you don't need library or any external source, just with Javascript

<script type='text/javascript'> //<![CDATA[ function syntaxHighlights() { var ca = document.getElementsByClassName("ediCm"); for(var i=0; i < ca.length; i++){ var data = ca[i].innerHTML; data = data.replace(/"(.*?)"/g, '<span class="code-str">"$1"</span>'); data = data.replace(/<(.*?)>/g, '<span class="code-elem"><$1></span>'); data = data.replace(/\/\* (.*?) \*\//g, '<span class="code-comment">/* $1 */</span>'); data = data.replace(/function(.*?) /g, '<span class="code-jsvar">function $1</span>'); data = data.replace(/:(.*?) /g, '<span class="code-cssref"> :$1</span>'); data = data.replace(/'(.*?)'/g, '<span class="code-str">'$1'</span>'); ca[i].innerHTML = data; } } window.addEventListener("load", syntaxHighlights); //]]> </script> <style> .code-str { color:#a11 }.code-elem{ color: #170; }.code-comment { color:#236e25; }.code-jsvar{color:#05a;}.code-cssref{color:#a11;} .code:focus-visible{outline:0} </style>

Exemple

<style> .code-str { color:#0000ee ;background:white } </style> <!--comment--> <h2>header </h2> <script> function syntaxHighlights() { /* Create a string object variable */ var name = 'Adam'; </script> <h2 id="h21" class="code-str" >Welcome Visitor</h2> <p>When in Rome, do as the Romans do.</p>

JavaScript Wysiwyg-editor

Mami Mahfoud May 12, 2021

building text editor template using html css js

https://manajmnt-code.blogspot.com/2021/05/building-text-editor-template-using.html

To build a text editor we need firstly an HTML template like this one
<style> .buttons { width: 100px; display: inline-block; border:0;cursor:pointer} button { width: 100%; border: 0; cursor: pointer; margin: 2px; } ul.dropdown { padding-inline-start: 0.2px; display: none; background: #dadada; margin-block-start: 0; width:150px; z-index:99} li.item { list-style: none; padding: 4px;cursor:pointer } li.item:hover { background: #eee } .buttons:hover ul.dropdown{display:block; position:absolute} </style> <div> <div class="buttons" > <button>file</button> <ul class="dropdown"> <li class="item">open</li> <li class="item">new</li> <li class="item">save</li> <li class="item">saveas</li> </ul> </div> <div class="buttons"> <button>edit</button> <ul class="dropdown"> <li class="item">cut</li> <li class="item">copy</li> <li class="item">paste</li> <li class="item">selectAll</li> </ul> </div> <div class="buttons"> <button>about</button> <ul class="dropdown"> <li class="item">building text editor template using html css js</li> </ul> </div> <div contenteditable="true" style="border:1px solid #eee; padding:3px; margin:0 2px; height:300px"></div> </div>

this template content a buttons, dropdowns, div tag editable.
the dropdown also content a command buttons to do something like open file, save, copy, paste, insert image...
to do this, we need: file system accessAPI and clipboard api

CSS HTML JavaScript Wysiwyg-editor

Mami Mahfoud May 01, 2021

How-to ask user to to verify or accept to remove content of div

https://manajmnt-code.blogspot.com/2021/04/how-to-ask-user-to-to-verify-or-accept.html

In this example we learn how to clear div content editable with button after ask user to verify or accept to remove content of div

<style> #content { width: 98%; height: 300px; box-shadow: 0 0 3px 0 #545454; padding: 5px; border-radius: 3px; } #content:focus-visible { box-shadow: 0 0 5px 3px #00b0ff; border: 1px solid #0090a2; outline: 0; } </style> <button onclick="return confirm_delete('Are you sure?')"> Clear </button> <div id="content" contenteditable="true">write text here and try to remove it</div> <script type="text/javascript"> function confirm_delete(question) { if(confirm(question)){ document.getElementById("content").innerHTML=""; }else{ return false; } } </script>

How-to JavaScript Wysiwyg-editor

Mami Mahfoud April 27, 2021

simple wysiwyg editor [ source code ]

https://manajmnt-code.blogspot.com/2021/03/simple-wysiwyg%20editor.html

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>

HTML Wysiwyg-editor

Mami Mahfoud March 24, 2021