var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$(document).delegate('textarea', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
$(this).trigger('input');
}
});
$scope.encode = function() {
var newVal = $scope.data || '';
newVal = newVal.replace(/ {4}/g, "\t");
if ($scope.escapeSymbols) {
newVal = newVal.replace(/(\$|\|)/g, '\\$1');
}
$scope.output = JSON.stringify(newVal);
};
$scope.decode = function() {
var newVal = $scope.data || '';
try {
newVal = JSON.parse(newVal).toString()
} catch(e) {
newVal = e.toString();
}
$scope.output = newVal;
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<form>
<h1>Text Inliner</h1>
<div class="form-row">
<h4>Input</h4>
<textarea class="form-control" placeholder="Insert the text here" name="data" ng-model="data" rows="10"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="escapeSymbols">
<span>escape $ and | symbols</span>
</label>
</div>
<div class="form-row">
<button ng-click="encode()" class="btn btn-default" type="button">Encode</button>
<button ng-click="decode()" class="btn btn-default" type="button">Decode</button>
</div>
<div class="form-row">
<h4>Output</h4>
<textarea ng-model="output" readonly="" class="form-control" rows="10"></textarea>
</div>
</form>
<footer class="text-center">
<p>Made with ♥ by <a href="https://github.com/ionutvmi">Mihai Ionut Vilcu</a>
</p>
</footer>
</body>
</html>
/* Put your css in here */
.form-row {
margin-top: 20px;
}