Just a simple rich-text editing example for those would-be CMS developers. :)
A Pen by Anthoni Caldwell on CodePen.
<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> |
Just a simple rich-text editing example for those would-be CMS developers. :)
A Pen by Anthoni Caldwell on CodePen.
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!" ); | |
} | |
} |
@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; | |
} |