jusfeel/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button id="mn1">Member Name 1</button>
<button id="mn2">Member Name 2</button>
<button id="mn3">Member Name 3</button>
<button id="mn4">Member Name 4</button>
<br/>
<textarea id="content"></textarea>
<script id="jsbin-javascript">
// insert the button ID to the cursor
// where in the text area when click
// the button

$(document).ready(function(){

  $("button").click(function(){
    var token = "~" + $(this).attr("id");
    console.log(token);
    //$("#content").html(token);
    var $t=$("#content")[0];
    addToken($t, token);
  });

  //get cursor position
  function getCursorPosition (ctrl) {
    var CaretPos = 0;	// IE Support
    if (document.selection) {
      ctrl.focus ();
      var Sel = document.selection.createRange ();
      Sel.moveStart ('character', -ctrl.value.length);
      CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
      CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
  }

  // insert token to where cursor is
  function addToken(obj, token){
    pos = getCursorPosition(obj);
    s = obj.value;
    obj.value = s.substring(0, pos) + token + s.substring(pos);
  }

});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button id="mn1">Member Name 1</button>
<button id="mn2">Member Name 2</button>
<button id="mn3">Member Name 3</button>
<button id="mn4">Member Name 4</button>
<br/>
<textarea id="content"></textarea>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">// insert the button ID to the cursor
// where in the text area when click
// the button

$(document).ready(function(){

  $("button").click(function(){
    var token = "~" + $(this).attr("id");
    console.log(token);
    //$("#content").html(token);
    var $t=$("#content")[0];
    addToken($t, token);
  });

  //get cursor position
  function getCursorPosition (ctrl) {
    var CaretPos = 0;	// IE Support
    if (document.selection) {
      ctrl.focus ();
      var Sel = document.selection.createRange ();
      Sel.moveStart ('character', -ctrl.value.length);
      CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
      CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
  }

  // insert token to where cursor is
  function addToken(obj, token){
    pos = getCursorPosition(obj);
    s = obj.value;
    obj.value = s.substring(0, pos) + token + s.substring(pos);
  }

});</script></body>
</html>

## jsbin.biwaco.js
// insert the button ID to the cursor
// where in the text area when click
// the button

$(document).ready(function(){

  $("button").click(function(){
    var token = "~" + $(this).attr("id");
    console.log(token);
    //$("#content").html(token);
    var $t=$("#content")[0];
    addToken($t, token);
  });

  //get cursor position
  function getCursorPosition (ctrl) {
    var CaretPos = 0;	// IE Support
    if (document.selection) {
      ctrl.focus ();
      var Sel = document.selection.createRange ();
      Sel.moveStart ('character', -ctrl.value.length);
      CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
      CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
  }

  // insert token to where cursor is
  function addToken(obj, token){
    pos = getCursorPosition(obj);
    s = obj.value;
    obj.value = s.substring(0, pos) + token + s.substring(pos);
  }

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<button id="mn1">Member Name 1</button>
	<button id="mn2">Member Name 2</button>
	<button id="mn3">Member Name 3</button>
	<button id="mn4">Member Name 4</button>
	<br/>
	<textarea id="content"></textarea>
	<script id="jsbin-javascript">
	// insert the button ID to the cursor
	// where in the text area when click
	// the button

	$(document).ready(function(){

	$("button").click(function(){
	var token = "~" + $(this).attr("id");
	console.log(token);
	//$("#content").html(token);
	var $t=$("#content")[0];
	addToken($t, token);
	});

	//get cursor position
	function getCursorPosition (ctrl) {
	var CaretPos = 0; // IE Support
	if (document.selection) {
	ctrl.focus ();
	var Sel = document.selection.createRange ();
	Sel.moveStart ('character', -ctrl.value.length);
	CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart \|\| ctrl.selectionStart == '0') {
	CaretPos = ctrl.selectionStart;
	}
	return (CaretPos);
	}

	// insert token to where cursor is
	function addToken(obj, token){
	pos = getCursorPosition(obj);
	s = obj.value;
	obj.value = s.substring(0, pos) + token + s.substring(pos);
	}

	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<button id="mn1">Member Name 1</button>
	<button id="mn2">Member Name 2</button>
	<button id="mn3">Member Name 3</button>
	<button id="mn4">Member Name 4</button>
	<br/>
	<textarea id="content"></textarea>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">// insert the button ID to the cursor
	// where in the text area when click
	// the button

	$(document).ready(function(){

	$("button").click(function(){
	var token = "~" + $(this).attr("id");
	console.log(token);
	//$("#content").html(token);
	var $t=$("#content")[0];
	addToken($t, token);
	});

	//get cursor position
	function getCursorPosition (ctrl) {
	var CaretPos = 0; // IE Support
	if (document.selection) {
	ctrl.focus ();
	var Sel = document.selection.createRange ();
	Sel.moveStart ('character', -ctrl.value.length);
	CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart \|\| ctrl.selectionStart == '0') {
	CaretPos = ctrl.selectionStart;
	}
	return (CaretPos);
	}

	// insert token to where cursor is
	function addToken(obj, token){
	pos = getCursorPosition(obj);
	s = obj.value;
	obj.value = s.substring(0, pos) + token + s.substring(pos);
	}

	});</script></body>
	</html>