支持select下拉框选择输入和键盘输入两种输入方式并且支持手动换行

接收到一个需求，目标是实现一个工具可以支持select下拉框选择输入和键盘输入两种输入方式同时支持手动换行。 

 

 1、键盘输入

默认情况下div标签是不可编辑的，加上contenteditable="true"之后使得div标签变成可编辑状态，我们可以随意修改div的内容。

div(class="tt" contenteditable="true") 鹅鹅鹅，曲项向天歌。白毛浮绿水，红掌拨清波。

 

 2、select下拉框选择输入

可以将选中的这个项包装成一个DOM对象作为子元素添加在div中。 

// select 部分
 el-select(v-model="val" placeholder="请选择...")
   el-option(v-for="(item,index) in list" :label="item.label" :value="item.value" @click.native="selectedThis(item)") 

// data部分
val:'',
list: [
        {
          value: "xingqiyi",
          label: "今天星期一"
        },
        {
          value: "xingqier",
          label: "今天星期二"
        },
        {
          value: "xingqisan",
          label: "今天星期三"
        },
        {
          value: "xingqisi",
          label: "今天星期四"
        },
        {
          value: "xingsiwu",
          label: "今天星期五"
        }
      ]

select 下拉框已实现， 接下来就是要把选中的option项对应的值进行包装并插入到设置有contenteditable="true"的div中

function selectedThis(item){
  var span=document.createElement("span");
  span.innerText=item.label; // 塞入选择的select的下拉选项
  span.setAttribute("contenteditable",false) // 不可编辑 
  span.setAttribute("style",stylexx) // stylexx 为具体样式
  document.getElementsByClassName("tt")[0].appendChild(span) //  追加
}

目前为止，已经把从select下拉菜单中选中的项添加到了div中且进行了突出展示。但是仍然有一个非常明显的问题：只能把选择的select下拉项追加的div的尾部，无法添加到任意光标所在的位置。

 3、window.getSelection()

window.getSelection() 返回一个对象，表示用户选择的文本范围或者当前位置
功能实现参考了https://blog.csdn.net/qiao13633426513/article/details/80243058    和 https://www.w3cschool.cn/fetch_api/fetch_api-tij22wqq.html  ， 并根据具体的需求进行调整。

以下是完整代码