Build a WordPress Wysiwyg Rich HTML Text Editor in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a WordPress Wysiwyg Rich HTML Text Editor in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a wordpress like wysiwyg rich html text editor in browser using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following below code

 

index.html

 

<html lang="en">

    <head>
      <link rel="preconnect" href="https://cdnjs.cloudflare.com">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css"/>
    
    </head>
    
    <body>
    
      <div class="toolbar">
    
        <button class="tool-items fa fa-underline"  onclick="document.execCommand('underline', false, '');">
        </button>
    
        <button class="tool-items fa fa-italic" onclick="document.execCommand('italic', false, '');">
        </button>
    
    
        <button class="tool-items fa fa-bold" onclick="document.execCommand('bold', false, '');">
        </button>
    
    
        <button class="tool-items fa fa-link" onclick="link()">
        </button>
    
        <button class="tool-items fa fa-scissors" onclick="document.execCommand('cut',false,'')"></button>
    
    
        <input class="tool-items fa fa-file-image-o" type="file" accept="image/*" id="file" style="display: none;" onchange="getImage()">
    
        <label for="file" class="tool-items fa fa-file-image-o"></label>
    
    
    
    
    
        <button class="tool-items fa fa-undo" onclick="document.execCommand('undo',false,'')"></button>
    
        <button class="tool-items fa fa-repeat" onclick="document.execCommand('redo',false,'')"></button>
    
        <button class="tool-items fa fa-tint" onclick="changeColor()"></button>
    
        <button class="tool-items fa fa-strikethrough" onclick="document.execCommand('strikeThrough',false,'')"></button>
    
        <button class="tool-items fa fa-trash" onclick="document.execCommand('delete',false,'')"></button>
    
    
        <button class="tool-items fa fa-scribd" onclick="document.execCommand('selectAll',false,'')"></button>
    
    
        <button class="tool-items fa fa-clone" onclick="copy()"></button>
    
    
    
    
        <!-- Jutify -->
    
        <button class="tool-items fa fa-align-center" onclick="document.execCommand('justifyCenter',false,'')"></button>
    
    
        <button class="tool-items fa fa-align-left" onclick="document.execCommand('justifyLeft',false,'')"></button>
        <button class="tool-items fa fa-align-right" onclick="document.execCommand('justifyRight',false,'')"></button>
      </div>
    
      <div class="center">
        <div class="editor" contenteditable>
          <h1>Simple Html editor</h1>
          <p>Good to start</p>
        </div>
      </div>
    
      <div class="center">
    
        <button class="sai btn">GetHtml</button>
        <button class="getText btn">GetText</button>
        <button class="btn
    print" onclick="printMe()">PrintHtml</button>
      </div>
    
    
    
      <div class="center">
        <section class="getcontent">
        </section>
      </div>
    
    
    </body>
    <script src="script.js"></script>
    
    
    </html>

 

See also  Build a Bootstrap Stopwatch Digital Clock Timer in HTML5 CSS3 and Javascript Full Project For Beginners

 

Now make a style.css file and copy paste the following below code

 

style.css

 

*,*::before,*::after{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


html{
    font-size: 1.1rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.toolbar{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(20px,40px));
    background-color: rgb(231, 231, 231);
    color: rgb(0, 0, 0);
    grid-gap: 1rem;
    padding: 1rem;
    justify-content: center;
    align-items:center;
}

.tool-items{
    background-color: rgb(27, 26, 26);
     padding-top: .6rem;
     padding-bottom:.6rem;
    cursor: pointer;
    color: #ffff;
}
.tool-items:hover{
    box-shadow: none;
    background-color: #6b5e5e;

}



.center{
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}


.editor{
    width:70vw;
    height: 50vh;
    margin: 2rem;
    padding: 1rem;
    font-size: 1.2rem;
    box-shadow: 0 .1rem .4rem black;
    border: 1px solid black;
    overflow-y: auto;
}

.getcontent{
    white-space: pre;
    width: 80vw;
    background-color: rgb(255, 255, 255);
    overflow: auto;
    padding: 1rem;
    display: none;
    margin-top: 1rem;
    box-shadow: .1rem .1rem .5rem rgb(255, 255, 255);
    border: 1px solid rgb(0, 0, 0);
}



.btn{
      padding: .5rem;
      background-color: #7e1111;
      margin-right: 1rem;
      color: #fffffc;
      letter-spacing: .1rem;
      font-size: 1rem;
      border-radius: .2rem;
      cursor: pointer;
      outline: none;
      box-shadow: 0 .4rem .4rem black;
      transition: all .3s;
}

.btn:hover{
      background-color: #7e1111d0;
      box-shadow: 0 .1rem .1rem black;
}



img{
    width: 60px;
    height: 60px;
    margin-top: .4rem;
    border-radius: 50rem;
}
label {
    margin-left: 0.04rem;
    padding-left:.7rem
}

 

 

Now make a script.js file and copy paste the following below code

 

script.js

 

var btn = document.querySelector(".sai");
var getText = document.querySelector(".getText");
var content = document.querySelector(".getcontent");
var editorContent = document.querySelector(".editor");

btn.addEventListener("click", function() {
  var s = editorContent.innerHTML;
  content.style.display = "block";
  content.textContent = s;
});

getText.addEventListener("click", function() {
  const old = editorContent.textContent;
  content.style.display = "block";
  content.textContent = old;
});

function link() {
  var url = prompt("Enter the URL");
  document.execCommand("createLink", false, url);
}

function copy() {
  document.execCommand("copy", false, "");
}

function changeColor() {
  var color = prompt("Enter your color in hex ex:#f1f233");
  document.execCommand("foreColor", false, color);
}


function getImage() {
  var file = document.querySelector("input[type=file]").files[0];

  var reader = new FileReader();

  let dataURI;

  reader.addEventListener(
    "load",
    function() {
      dataURI = reader.result;

      const img = document.createElement("img");
      img.src = dataURI;
      editorContent.appendChild(img);
    },
    false
  );

  if (file) {
    console.log("s");
    reader.readAsDataURL(file);
  }
}

function printMe() {
  if (confirm("Check your Content before print")) {
    const body = document.body;
    let s = body.innerHTML;
    body.textContent = editorContent.innerHTML;

    document.execCommandShowHelp;
    body.style.whiteSpace = "pre";
    window.print();
    location.reload();
  }
}

 

See also  Node.js Project to Convert SVG Image to Webp Format Using Sharp in Javascript Full Tutorial For Beginners

 

Now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply