<div id="test" contenteditable="true">
  Hallo ,
  <br> komm zum Vorstellungsgespräch!
</div>

<div class="button vars">
  Platzhalter wählen
  <ul>
    <li><a onclick="document.getElementById('test').focus();insertHtml('<var contenteditable=\'false\'>firstName</var>')">firstName (onclick)</a></li>
    <li onmousedown="document.getElementById('test').focus();insertHtml('<var contenteditable=\'false\'>lastName</var>')"><a>lastName (onmousedown)</a></li>
  </ul>
</button>
div[contenteditable="true"]{
  width: 200px;
  height: 100px;
  border: 2px solid #ddd;
  padding: 3px;
}

var {
  padding: 0 5px;
  border: 1px solid black;
  display: inline-block;
}

.button {
    display: inline-block;
    padding: 9px 16px;
    max-height: 38px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #ddd;
    background: #FFF;
    color: #333;
}

.vars {
  ul {
    display: none;
    position: absolute;
    list-style-type: none;
    padding: 5px;
    margin: 8px;
    border: 2px solid #ddd;
  }
  &:hover ul{
    display: block;
  }
  li:hover {background-color: lightgrey}
}
View Compiled
function insertHtml(html) {
  range = document.getSelection().getRangeAt(0);
  fragment = document.createRange().createContextualFragment(html);
  range.insertNode(fragment);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.