JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<div class="container">
	<table>
	<tr>
		<td>Name:</td>
		<td><div class="editable" data-asset="name"></div></td>
	</tr>
  <tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
	<tr>
		<td>Tags:</td>
		<td>
			<div class="editable" data-asset="tags"></div>
			<button id="asset-button-tags-edit">Edit Tags</button>
		</td>
	</tr>
	</table>
</div>

CSS

body, html {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	outline: none;
}

body {
	background: #fff;
	font-family: sans-serif;
	font-size:12px;
	line-height: 24px;
}

button {
	line-height: 24px;
	height: auto;
	padding: 0 12px;
	background: #333555;
	border: none;
	color: #fff;
	font-size: 12px;
	border-radius: 2px;
	display: inline-block;
}

.container {
	padding: 32px 16px;
}

.editable {
	border: none;
	text-decoration: underline;
	font-size: 12px;
	display: inline-block;
	margin-right: 16px;
}

table {
	border-collapse: collapse;
	border: none;
	width: 100%;
}
table tr:nth-child(even) {background: #fafafa;}
table td {
	padding: 8px 16px;
	border: 1px solid #eee;
}
table td:first-child {font-weight: bold;}

JavaScript

var data = {
	assetName: 'Cyrus\' M3',
	assetDescription: 'Morbi non malesuada dui, ut cursus ex. Morbi lorem orci, convallis in velit vitae, euismod sodales ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius nisl metus, in hendrerit orci egestas non. Suspendisse potenti. Fusce aliquam eu velit et vestibulum. Cras nec nisl nec mauris ultrices gravida. Praesent commodo lectus in ligula placerat lacinia. Sed tortor nisl, bibendum laoreet orci quis, rutrum scelerisque ex. Donec venenatis feugiat risus, in aliquam ante pellentesque ac. Nunc nunc dolor, efficitur vel massa eget, condimentum aliquam magna. Etiam faucibus ornare nibh, et consectetur nunc mollis in. Aliquam suscipit at nibh id volutpat. Donec at purus eget sapien ultrices bibendum.',
  // current tags <- user can add and remove tags
	assetTags: [{
  '345': 'Winner',
  '789': 'Boy Racer',
  '101': 'Boy Racer',
  '009': 'Orange',
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }]
  
  // available tags <- user could only add tags from this list
  
};

var $assetName = $('[data-asset="name"]'),
	$assetTags = $('[data-asset="tags"]'),
	$assetDescription = $('[data-asset="description"]');


// populating asset name
$assetName.text(data.assetName);
$assetDescription.text(data.assetDescription);

// initialise editable
$('.editable').editable({mode: 'popup'});

$assetTags.editable({  //to keep track of selected values in multi select
    type: 'select2',
    pk: 1,
    autotext : 'always',
    source : getSource(),
    value : data.assetTags,
    emptytext: 'None',
    display: function(value, sourceData) {
       var html = data.assetTags,
           checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       }
       else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple...