jQuery WYSIWYG Editor

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery WYSIWYG Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style>
/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Asap:400,700);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif&subset=latin-ext,latin);
*, *:before, *:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: greyscale;
}

body {
  background: #E9F0F4;
}

.newPost {
  margin: 50px auto;
  padding: 50px 40px;
  width: 100%;
  max-width: 800px;
  min-width: 480px;
  background: #FFF;
  font-family: 'Asap', sans-serif;
}
.newPost h3 {
  margin: 0px 0px 20px 0px;
  font-size: 30px;
  color: #2E3641;
}
.newPost input[type="text"] {
  padding-left: 15px;
  width: 100%;
  height: 45px;
  border: 1px solid #C1CFD9;
  box-shadow: inset 0px 0px 3px #C1CFD9;
  outline: none;
  font-family: 'Bree Serif', serif;
  font-size: 24px;
  color: #212121;
  margin-bottom: 20px;
}
.newPost .toolbar {
  background: #2E3641;
}
.newPost .toolbar button {
  float: left;
  width: 45px;
  height: 45px;
  background: #2E3641;
  border: none;
  border-right: 1px solid #434f5f;
  color: #C1CFD9;
  outline: none;
}
.newPost .toolbar button:hover {
  background: #394250;
  color: #b1c3cf;
}
.newPost .toolbar .customSelect {
  float: right;
  position: relative;
}
.newPost .toolbar .customSelect select {
  appearance: none;
  border-radius: 0;
  border: none;
  background: #2E3641;
  height: 45px;
  padding-left: 10px;
  padding-right: 25px;
  color: #C1CFD9;
  border-left: 1px solid #434f5f;
  outline: none;
  font-weight: bold;
  cursor: pointer;
}
.newPost .toolbar .customSelect select:hover {
  background: #394250;
  color: #b1c3cf;
}
.newPost .toolbar .customSelect:after {
  content: "\f0dc";
  font-family: FontAwesome;
  color: #C1CFD9;
  position: absolute;
  right: 10px;
  top: 15px;
}
.newPost .toolbar:after {
  content: '';
  display: block;
  clear: both;
}
.newPost .editor {
  min-height: 300px;
  width: 100%;
  resize: none;
  border: 1px solid #C1CFD9;
  box-shadow: inset 0px 0px 3px #C1CFD9;
  outline: none;
  padding: 15px;
  margin-bottom: 20px;
  position: relative;
}
.newPost .editor .saved {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  background: #C1CFD9;
  font-weight: bold;
  border-top-left-radius: 15px;
}
.newPost .buttons {
  float: right;
}
.newPost .buttons button {
  float: left;
  width: 120px;
  height: 45px;
  border: none;
  color: #FFF;
  text-transform: uppercase;
  outline: none;
  margin-right: 20px;
  font-weight: bold;
  background: #C1CFD9;
  text-decoration: none;
}
.newPost .buttons button:last-of-type {
  margin-right: 0px;
  background: #ff4b4b;
}
.newPost .buttons button:last-of-type:hover {
  background: #ff2c2c;
}
.newPost .buttons button:active {
  box-shadow: inset 0px 4px rgba(0, 0, 0, 0.05);
}
.newPost .buttons button:hover {
  background: #d1dbe3;
}
.newPost .buttons:after {
  content: '';
  display: block;
  clear: both;
}
.newPost:after {
  content: '';
  display: block;
  clear: both;
}
@media (max-width:650px) {
  .newPost {
    padding: 15px 10px;
    width: 100%;
    min-width: 0;
  }
}

</style>
</head>
<body>
<div class="newPost">
  <h3>Add New Post</h3>
  <input type="text" placeholder="Enter title here">
  <div class="toolbar">
    <button type="button" data-func="bold"><i class="fa fa-bold"></i></button>
    <button type="button" data-func="italic"><i class="fa fa-italic"></i></button>
    <button type="button" data-func="underline"><i class="fa fa-underline"></i></button>
    <button type="button" data-func="justifyleft"><i class="fa fa-align-left"></i></button>
    <button type="button" data-func="justifycenter"><i class="fa fa-align-center"></i></button>
    <button type="button" data-func="justifyright"><i class="fa fa-align-right"></i></button>
    <button type="button" data-func="insertunorderedlist"><i class="fa fa-list-ul"></i></button>
    <button type="button" data-func="insertorderedlist"><i class="fa fa-list-ol"></i></button>
    <div class="customSelect">
      <select data-func="fontname">
        <optgroup label="Serif Fonts">
          <option value="Bree Serif">Bree Serif</option>
          <option value="Georgia">Georgia</option>
           <option value="Palatino Linotype">Palatino Linotype</option>
          <option value="Times New Roman">Times New Roman</option>
        </optgroup>
        <optgroup label="Sans Serif Fonts">
          <option value="Arial">Arial</option>
          <option value="Arial Black">Arial Black</option>
          <option value="Asap" selected>Asap</option>
          <option value="Comic Sans MS">Comic Sans MS</option>
          <option value="Impact">Impact</option>
          <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
          <option value="Tahoma">Tahoma</option>
          <option value="Trebuchet MS">Trebuchet MS</option>
          <option value="Verdana">Verdana</option>
        </optgroup>
        <optgroup label="Monospace Fonts">
          <option value="Courier New">Courier New</option>
          <option value="Lucida Console">Lucida Console</option>
        </optgroup>
      </select>
    </div>
    <div class="customSelect">
      <select data-func="formatblock">
        <option value="h1">Heading 1</option>
        <option value="h2">Heading 2</option>
        <option value="h4">Subtitle</option>
        <option value="p" selected>Paragraph</option>
      </select>
    </div>
  </div>
  <div class="editor" contenteditable></div>
  <div class="buttons">

<button data-func="clear" type="button">clear</button>
    <button data-func="save" type="button">save</button>
  </div>
</div>

// Code By Webdevtrick ( https://webdevtrick.com )
$('.newPost button[data-func]').click(function(){
    document.execCommand( $(this).data('func'), false 	);
  });

$('.newPost select[data-func]').change(function(){
    var $value = $(this).find(':selected').val();
    document.execCommand( $(this).data('func'), false, $value);
  });

if(typeof(Storage) !== "undefined") {

$('.editor').keypress(function(){
    $(this).find('.saved').detach();
  });
    $('.editor').html(localStorage.getItem("wysiwyg")) ;
    
    $('button[data-func="save"]').click(function(){
      $content = $('.editor').html();
      localStorage.setItem("wysiwyg", $content);
      $('.editor').append('<span class="saved"><i class="fa fa-check"></i></span>').fadeIn(function(){
        $(this).find('.saved').fadeOut(500);
      });
    });
    
    $('button[data-func="clear"]').click(function(){
      $('.editor').html('');
      localStorage.removeItem("wysiwyg");
    });
    
    
  }

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

jQuery WYSIWYG Editor