MooEditable

Demo for MooEditable.

by Craig Martin

HTML

<link rel="stylesheet" href="http://github.com/cheeaun/mooeditable/raw/master/Assets/MooEditable/MooEditable.css">
<script src="http://github.com/cheeaun/mooeditable/raw/master/Source/MooEditable/MooEditable.js"></script>
<textarea class="mooeditable" id="textarea-1" name="editable">
&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
</textarea>

CSS

.mooeditable{
  //  border: 2px solid #ddd;
}
#textarea-1{
   width: 440px;
    height: 200px;
  //  padding: 10px;
}
.mooeditable{
  //  border: 2px solid #ddd;
}
#textarea-1{
   width: 440px;
  //  height: 200px;
  //  padding: 10px;
}
.mooeditable-container{
	position: relative;
	border: 2px solid #ddd;
}

.mooeditable-ui-toolbar{
	color: inherit;
	background-color: #eee;
	padding: 2px;
}

.mooeditable-ui-toolbar:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.mooeditable-ui-toolbar .toolbar-item,
.mooeditable-ui-toolbar .toolbar-separator{
	display: -moz-inline-box;
	display: inline-block;
	vertical-align: middle;
}

.mooeditable-ui-toolbar .mooeditable-ui-button{
	cursor: pointer;
	border: 0;
	width: auto;
	height: auto;
	margin: 2px;
	padding: 2px;
	vertical-align: middle;
	color: inherit;
	background-color: transparent;
}
* html .mooeditable-ui-toolbar .mooeditable-ui-button{ /* IE6 */
	width: 24px;
	overflow: visible;
	padding: 2px 4px;
}
*:first-child+html .mooeditable-ui-toolbar .mooeditable-ui-button{ /* IE7 */
	min-width: 24px;
	overflow: visible;
	padding: 2px 4px;
}

.mooeditable-ui-toolbar .mooeditable-ui-button.active,
.mooeditable-ui-toolbar .mooeditable-ui-button.onActive{
	color: inherit;
	background-color: #ddd;
}

.mooeditable-ui-toolbar .mooeditable-ui-button:hover,
.mooeditable-ui-toolbar .mooeditable-ui-button.hover{
	color: inherit;
	background-color: #fff;
}

.mooeditable-ui-toolbar .mooeditable-ui-button.disabled{
	cursor: default;
}

.mooeditable-ui-toolbar .mooeditable-ui-button.disabled:hover{
	color: inherit;
	background-color: transparent;
}

.mooeditable-ui-toolbar .mooeditable-ui-button .button-icon{
	display: -moz-inline-box;
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	color: inherit;
	background: transparent url(https://raw.githubusercontent.com/cheeaun/mooeditable/master/Assets/MooEditable/images/mooeditable-toolbarbuttons-tango.png) no-repeat 0...

JavaScript

$('textarea-1').mooEditable()