Rich Text Editor

index.html

<div id="toolbar">
  <div id="title"> Rich-text Editor </div>
  <button id="bold" onclick="makeBold()"> Bold </button>
  <button id="italic" onclick="makeItalic()"> Italic </button>
  <button id="underline" onclick="doUnderline()"> Underline </button>

  <button onclick="justifyLeft()"> Justify Left </button>
  <button onclick="justifyCenter()"> Justify Center </button>
  <button onclick="justifyRight()"> Justify Right </button>

  <button onclick="doAddImage()"> Add Image </button>
  
  <button onclick="doSetTextColor()"> Set Text Color </button>
</div>
<div id="editor" contenteditable="true">Start writing here....</div>

rich-text-editor.markdown

Rich Text Editor

Just a simple rich-text editing example for those would-be CMS developers. :)

A Pen by Anthoni Caldwell on CodePen.

License.

script.js

function makeBold() {
  document.execCommand( "bold" );
  if ( document.getElementById( "bold" ).isToggled ) {
    document.getElementById( "bold" ).style.backgroundColor = "#00cc55";
    document.getElementById( "bold" ).isToggled = false;
  } else {
    document.getElementById( "bold" ).style.backgroundColor = "#008833";
    document.getElementById( "bold" ).isToggled = true;
  }
}

function makeItalic() {
  document.execCommand( "italic" );
   if ( document.getElementById( "italic" ).isToggled ) {
    document.getElementById( "italic" ).style.backgroundColor = "#00cc55";
    document.getElementById( "italic" ).isToggled = false;
  } else {
    document.getElementById( "italic" ).style.backgroundColor = "#008833";
    document.getElementById( "italic" ).isToggled = true;
  }
}

function doUnderline() {
  document.execCommand( "underline" );
   if ( document.getElementById( "underline" ).isToggled ) {
    document.getElementById( "underline" ).style.backgroundColor = "#00cc55";
    document.getElementById( "underline" ).isToggled = false;
  } else {
    document.getElementById( "underline" ).style.backgroundColor = "#008833";
    document.getElementById( "underline" ).isToggled = true;
  }
}

function doAddImage() {
  var image_url = prompt( "Image URL:" );
  if (image_url != "") {
    document.execCommand( "insertImage", false, image_url);
  } else {
    alert( "You must set a URL!" );
  }
}

function justifyLeft() {
  document.execCommand( "justifyLeft" );
}

function justifyCenter() {
  document.execCommand( "justifyCenter" );
}

function justifyRight() {
  document.execCommand( "justifyRight" );
}

function doSetTextColor() {
  var text_color = prompt( "CSS Color:" );
  if (text_color != "") {
    document.execCommand( "foreColor", false, text_color);
  } else {
    alert( "You must set a Color!" );
  }
}

style.css

@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800);

* { margin: 0; padding: 0; }

#title {
  color: #fff;
  font: bold 10pt 'Merriweather Sans', sans-serif;
  margin: 0.5em 16px 0 16px;  
  float: left;
  clear: none;
}

#editor {
  font: 300 10pt 'Merriweather Sans', sans-serif;
  height: 20em;
  margin: 8px;
  padding: 8px;
  border: 1px solid #ccc;
}

#toolbar {
  font: 10pt 'Merriweather Sans', sans-serif;
  background: #00aa33;

  margin: 0 0 6px 0;
  padding: 6px;
}

button {
  font: 10pt 'Merriweather Sans', sans-serif;
  background: #00cc55;
  padding: 6px;
  border: none;
  
  box-shadow: 1px 1px 0 #000;
  -webkit-box-shadow: 1px 1px 0 #000;
  -moz-box-shadow: 1px 1px 0 #000;
}

button:hover {
  background: #00dd77;
}

button:active {
  background: #00aa55;
  
  transform: translate( 1px, 1px );
  -webkit-transform: translate( 1px, 1px );
  -moz-transform: translate( 1px, 1px );
  
  box-shadow: 0 0 0;
  -webkit-box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
}