Simple Editor in Kendo

<!DOCTYPE html>
<html>

<head>
  <title>Editor</title>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
</head>

<body>
  <div id="entityList" class="entities"></div>
  <div>
    <textarea id="editor" class="editorArea" style="width:100%; height:400px;" placeholder="Hello"></textarea>
  </div>
  <div id="instructions">
    <h4>Instructions of use</h4>
    <ul>
      <li>Drag a symbol onto the editor</li>
      <li>Complete an expression by typing in variables</li>
      <li>Click Play icon to view the expression in HTML format</li>
      <li>Click Trash icon to clear the expression from the editor</li>
    </ul>
  </div>
</body>

</html>

html, body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

.entities {
   list-style-type: none;
   display: inline-block;
   margin-right: 15px;
   font-size: 18px;
   padding: 15px;
   padding-left: 15px;
   cursor: pointer;
   border: 0px;
}

.entityIcon {
  font-size: 16px;
  color: blue;
}

.divEditor {
  height: 200px;
  margin: 10px;
  border: 1px solid black;
}

.overlay {
  opacity: 0;
  background-color: blue;
  width: 100%;
  height: 400px;
  z-index: 10;
	margin: 0;
	padding: 0;
	position: absolute;
}

.k-editor .k-clear
{
    background: 50% 50% no-repeat url(http://png-4.findicons.com/files/icons/2675/premium_pixels/16/trash.png);
}

.k-editor .k-run
{
    background: 50% 50% no-repeat url(https://jira.appcelerator.org/secure/attachment/15016/run.png);
}

$(document).ready(function() {

  /* kendo List */
  var htmlEntities = [{
    "id": 1,
    "name": "&#43;"
  }, {
    "id": 2,
    "name": "&#8722;"
  }, {
    "id": 3,
    "name": "&#215;"
  }, {
    "id": 4,
    "name": "&divide;"
  }, {
    "id": 5,
    "name": "&#37;"
  },
  {
    "id": 6,
    "name": "&#40;"
  },{
    "id": 7,
    "name": "&#41;"
  }];

  var entityList_ds = new kendo.data.DataSource({
    data: htmlEntities
  });

  var entityListView = $("#entityList").kendoListView({
    dataSource: entityList_ds,
    template: "<li data-id='${uid}' class='entities'>#=name#</li>"
  }).data("kendoListView");

  $("#entityList").kendoDraggable({
    filter: "li",
    hint: function(element) {
      var ele = $("<b class='entityIcon'>" + element.html() + "</b>");
      return ele;
    },
    cursorOffset: {
      top: -30,
      left: 1
    },
    group: "entityGroup",
    dragstart: function(e) {
      addOverlay();
    },
    dragend: function(e) {
      removeOverlay();
      editor.paste(e.currentTarget.closest('li').text());
    }
  });

  /* kendo Editor */
  var editor = $("#editor").kendoEditor({
    "tools": [
      "bold",
      "italic",
      "underline",
      "subscript",
      "superscript",
      "foreColor",
      "backColor", {
        name: "run",
        tooltip: "Run"
      }, {
        name: "clear",
        tooltip: "Clear",
        exec: function(e) {
         var editor = $(this).data("kendoEditor");
         editor.value('');
       }
      }
    ]
  }).data("kendoEditor");
  
  var eFrame = $($('#editor').data().kendoEditor.body);

  function addOverlay() {
    $(document).find(".k-editable-area").prepend('<div id="overlay" class="overlay"></div>');
  }

  function removeOverlay() {
    $('#overlay').remove();
  }

  $("#overlay").click();
  
   $(".k-run").click(function(e) {
    var editor = $("#editor").data("kendoEditor");
    var expression = editor.value();
    alert(expression);
   });
  
});