在像YouTube标签这样的文本区域内拆分和包装单词

Question

我想创建类似于YouTube视频代码功能的内容，您可以在其中标记一个标记并将其拆分为逗号，然后它会获得一些样式，并且只有在删除后才能再次更改。

我有一个非常基本的例子，但在某些功能上有一些问题，比如

我不知道如何在最后删除逗号，我尝试切片但没有运气。 另外，我想阻止使用退格键删除div。 我想在分割单词后再次显示光标线，现在你必须在重新出现之前输入。

JSFiddle

<div id='textarea' contenteditable></div>

$('#textarea').on('keyup', function(){
  var input = $(this).html();
  var lastChar = input[input.length -1];

  if(lastChar == ','){
    $(this).contents().last().wrapAll("<div class='contentWrapper' contenteditable='false'/>");
    console.log($(this).contents().last().html());
  }
});

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    background-color: #FFF;
    border: 1px solid gray;
    font-family: Roboto, Lucida Grande,Lucida Sans,Arial,sans-serif;
    height: 120px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 234px;
    display: block;
}

.contentWrapper{
    width: auto;
    border: 1px solid #B0AEAE;
    background-color: #F3F3F3;
    padding: 2px;
    margin: 3px;
    display: inline-block;
}