如何使用Javascript在textarea中添加按钮？

Question

我的客户希望我在里面创建一个textarea，其中必须有一个如下图所示的按钮：

在上面的图片中，请按照图片的右侧，您可以看到蓝色支撑，即按钮。

这必须像第二张图片一样点击（如下拉列表）：

在第二张图片中，我们可以看到点击大括号按钮后列表已打开，点击列表中的选项即可在Textarea上书写。但是整个事情应该在客户端工作，即使用我很新的Javascript或Jquery。所以，我无法从此开始。我需要你对上述方面的明智建议，我如何能够实现以下目标，同时我也在做研究，如果我知道任何事情，那么我会更新我的问题或回答我的问题。提前谢谢。

Answer 1

这是一个或多或少的版本，但是，由于菜单的container-div必须放在textarea之外，因此没有办法让它动态适应textare只使用CSS - 所以你必须使用js。

* {
  box-sizing: border-box;
  }
#textareamenu_content ul,#textareamenu {
  display: none;
  }
#textarea_container {
  position: relative;
  display: inline-block;
  }
#textarea_container label {
  background: blue;
  color: white;
  padding: .2em;
  position: absolute;
  top: 0;
  right: 0;
  padding: .2em;
  }
#textareamenu:checked ~ #textareamenu_content {
  position: absolute;
  top: 0;
  right: 0;
  overflow-y: scroll;
  max-height: 15em;
  min-height: 12em;
  min-width: 10em;
  border-left: 1.4em solid blue;
  z-index: 99;
  }
#textareamenu:checked ~ #textareamenu_content ul {
  display: block;
  }
textarea {
  min-height: 15em;
    min-width: 40em;
    }
#textareamenu:checked ~ label {
  position: absolute;
  right: 8.6em;
  top: 0;
  width: 1.4em;
  z-index: 100;
  }

<div id="textarea_container">
<textarea name="text"></textarea>
  <input type="checkbox" id="textareamenu">
  <label for="textareamenu">{}</label>
  <div id="textareamenu_content">

  <ul>
     <li>First_Name</li>
    <li>Last_Name</li>
  </ul>
</div>
  </div>