Medium

HTML

<link rel="stylesheet" href="http://cep.eduxy.net/js/lib/medium/medium.css">
<script src="http://cep.eduxy.net/js/lib/medium/medium.js"></script>
<div class="toolbar-top">
   <span class="toolbar">
    <span id="rich4-bold" style="font-weight: bold; color: #66d9ef">B</span>
    <span id="rich4-underline" style="text-decoration: underline; color: #a6e22e">U</span>
    <span id="rich4-italic" style="font-style: italic; color: #f92672">I</span>
    <span id="rich4-strike" style="text-decoration: line-through; color: #e6db74">S</span>
   </span>
</div>
<div id="article4" class="article demo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum dapibus dictum. Etiam tempor a enim id sagittis. Donec sodales varius elementum. In iaculis consequat enim, et pellentesque erat accumsan ut. Nulla nec lacus nisi. Nullam id interdum risus, sit amet sollicitudin ipsum. Ut vitae rutrum nulla.<br>
    <br>
    Vivamus eget dolor est. Donec lobortis felis metus, vel placerat nunc iaculis id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu neque dictum, pulvinar massa faucibus, accumsan diam. Vestibulum pharetra massa dolor, ut tincidunt nisl suscipit vitae.
</div>

JavaScript

var article4 = document.getElementById('article4'),
    article4Medium = new Medium({
        element: article4,
        mode: Medium.richMode,
        placeholder: 'Your Article 4',
        attributes: null,
        tags: null,
	    pasteAsText: false
    });

article4.highlight = function() {
	if (document.activeElement !== article4) {
		article4Medium.select();
	}
};

document.getElementById('rich4-bold').onmousedown = function() {
	article4.highlight();
    article4Medium.invokeElement('b', {
	    title: "I'm bold!",
	    style: "color: #66d9ef"
    });
	return false;
};

document.getElementById('rich4-underline').onmousedown = function() {
	article4.highlight();
	article4Medium.invokeElement('u', {
		title: "I'm underlined!",
		style: "color: #a6e22e"
	});
	return false;
};

document.getElementById('rich4-italic').onmousedown = function() {
	article4.highlight();
	article4Medium.invokeElement('i', {
		title: "I'm italics!",
		style: "color: #f92672"
	});
	return false;
};

document.getElementById('rich4-strike').onmousedown = function() {
	article4.highlight();
	article4Medium.invokeElement('strike', {
		title: "I've been struck!",
		style: "color: #e6db74"
	});
	return false;
};