How To Design HTML Editor Tool ?

online html editor

you can use our below code to design online html code editor for writing web pages using html, css, bootstrap, js and jQuery

index.html

 <div class="container-fluid sk-html-editor">
      <div class="site-hrd">
          <h1 class="text-center text-white">SK sLate HTML Online Editor</h1>
          <p class="text-center text-gray">You can edit html,css,bootstrap(plz include cdn),js and jquery(plz include cdn).</p>
      </div>
      <div class="row sk-editor-parent">
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 sk-editor">
            <div class="sk-html-editor-navbar">
              <nav class="navbar navbar-expand-sm">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link btn btn-dark home-btn p-2" href="../../index.html">
                      <i class="fas fa-home"></i>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"></a>
                  </li>
                </ul>
                <div class="navbar-nav ml-auto">
                   <a class="nav-link btn btn-success nav-item nav-link" href="#" id="runHtml" width="100">
                      RUN &nbsp;<i class="fas fa-angle-double-right"></i>
                    </a>
                </div>

              </nav>
            </div>
            <div class="sk-html-edit-window" contenteditable>
<xmp><!DOCTYPE html>
  <html> 
    <head>
    <title>SK sLate HTML Onlie Editor</title>
    </head>
    <body>
          <h1>SK sLate HTML Online Editor</h1>
          <p>You can edit html,css,bootstrap(plz include cdn),js and jquery(plz include cdn).</p>
    </body>
  </html> 
          </xmp>
 
            </div>
          </div>
          <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 sk-editor-result">
            <div class="sk-html-editor-navbar">
              <nav class="navbar navbar-expand-sm">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      Rended Result :
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <iframe class="sk-html-result-window">

            </iframe>
          </div>
      </div>
  </div>

editor.css

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;family=Poppins&amp;display=swap');
*{
    font-family: 'Oswald', sans-serif;
    font-weight: 200; 
}
:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --1:#2c2c2c;
  --2:#ffffff;
  --3:#1e8efb;
}
html {
scroll-behavior: smooth;
}

.pr{
position:relative;
}

body {
    background: var(--1);
    transition: all 0.5s;
}
.sk-html-result-window{
	border: none;
}
.sk-html-edit-window , .sk-html-result-window{
    box-shadow: 0 0 0 2px rgb(0 0 0 / 35%);
    margin-top: 10px;
    padding: 10px;
    min-height: 500px;
    border-left: 10px solid rgba(0,0,0,0.25);
    width:100%;
    overflow: auto;
}


.sk-html-edit-window:focus {
    outline: none;
}
.sk-html-edit-window{
	background: #282c34;	
	color:#fff;
	font-family: 'Poppins', sans-serif;
}
.sk-html-edit-window div, .sk-html-edit-window xmp{
	/*font-family: 'Poppins', sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
}
.sk-html-result-window{
	background: #ffffff;
}

p.text-center.text-gray {
    color: darkgray;
}
.sk-html-editor-navbar .navbar{
	background: #616161;
}
.sk-html-editor-navbar .navbar a{
	 color: #fff;
}
.home-btn{
	display: block;
}
#runHtml{
	width: 100px;
}
@media only screen and (max-width: 720px) {
	.sk-html-edit-window , .sk-html-result-window{
		min-height: 200px;
		max-height: 300px;
	}
	.site-hrd h1 {
	    font-size: 30px;
	    margin-top: 20px;
	}

	a.nav-link{
		margin-bottom:0px !import;
		padding-bottom: 0px !import;
	}
	ul.navbar-nav {
	    align-items: center;
	    display: contents;
	}
}

editor.js

const editWindow = document.querySelector(".sk-html-edit-window");
const iframe = document.querySelector("iframe");
const runHtml = document.getElementById("runHtml");

runHtml.addEventListener("click", () =&gt; {
  	var html = editWindow.textContent;
  	iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});

/*
editWindow.addEventListener('keyup',()=&gt;{
	var html = editWindow.textContent;
	iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})*/

editWindow.addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertText", false, text);
});

Preview of Online HTML Editor

SK sLate Online HTML Editor

SK sLate Online HTML Editor

CLICK HERE TO DOWNLOAD CODE

Write a comment