JSFiddle - React, Tailwind, and code Playground

by andresilich

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="well content-editable">
    <div class="edit-menu">
        <span class="btn-group" data-toggle="buttons-checkbox">
          <button class="btn btn-bold">Bold</button>
          <button class="btn btn-italics">Italics</button>
          <button class="btn btn-underline">Underline</button>
        </span>
    </div>
    <div contenteditable="true" class="editable">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

CSS

body { margin:20px; }

.content-editable {
    border:1px solid #aaa;
    width:280px;
    min-height:200px;
    background-color:white;
    position:relative;
}

.editable {
    margin-top:20px;
}

.edit-menu {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    background-color: #E8E8E8;
    border-bottom: 1px solid #AAAAAA;
    height: 32px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.edit-menu {
    text-align: center;
}
 
.edit-menu:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.btn-group {
    display: inline-block;
    vertical-align: middle;
    position:relative;
    font-weight:bold;
}

[contenteditable]:hover:after {
    content: ' click to edit';
    font-style: italic;
    font-size: 12px;
    font-family: sans-serif;
    color: #ccc;
}

[contenteditable]:hover, [contenteditable]:focus {
    background: #F9F9F9;
}

[contenteditable]:focus:after {
  content: '';
}

JavaScript

var current;
$(function() {
    $("div[contenteditable]").focus(function() {
        current = this;
    });

    // bold
    $('.btn-bold').click(function() {
        document.execCommand('bold', false, null);
        $(current).contents().focus();
    });

    //italics
    $('.btn-italics').click(function() {
        document.execCommand('italic', false, null);
        $(current).contents().focus();
    });

    //underline
    $('.btn-underline').click(function() {
        document.execCommand('underline', false, null);
        $(current).contents().focus();
    });
});