JS在可编辑的div中的光标位置插入内容的方法

当需要在可编辑的div中插入内容时，我们需要使用JS来设置光标位置。下面是JS在可编辑的div中的光标位置插入内容的完整攻略：

步骤1：获取可编辑div元素

const editableDiv = document.getElementById('editable');

步骤2：监听可编辑div的键盘事件

当用户在可编辑的div中输入内容时，我们需要监听键盘事件，以便设置光标位置。

editableDiv.addEventListener('keydown', (event) => {
  const key = event.key;
  if(key === 'Enter'){
    // 在这里插入内容，并设置光标位置
  }
});

步骤3：插入内容并设置光标位置

在监听到键盘事件后，在指定的光标位置插入内容，并将光标移动到新插入的内容后面。

editableDiv.addEventListener('keydown', (event) => {
  const key = event.key;
  if(key === 'Enter'){
    // 在这里插入内容，并设置光标位置
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const newline = document.createElement('br');
    range.insertNode(newline);
    range.setStartAfter(newline);
  }
});

在上面的代码中，我们创建了一个新元素<br>并将其插入到当前光标位置，然后将光标位置设置为<br>元素的下一个位置。

示例1：在可编辑的div中插入图片

const editableDiv = document.getElementById('editable');
editableDiv.addEventListener('paste', (event) => {
  // 获取粘贴的内容并转换成Blob对象
  const files = event.clipboardData.files;
  if(files.length > 0){
    const file = files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      // 创建新的<img>标签并插入到当前光标位置
      const img = document.createElement('img');
      img.src = reader.result;
      const selection = window.getSelection();
      const range = selection.getRangeAt(0);
      range.insertNode(img);
      range.setStartAfter(img);
    }
  }
});

示例2：在可编辑的div中插入表格

editableDiv.addEventListener('keydown', (event) => {
  const key = event.key;
  if(key === 'Tab'){
    // 创建新的表格并插入到当前光标位置
    const table = document.createElement('table');
    const tbody = document.createElement('tbody');
    const tr = document.createElement('tr');
    const td = document.createElement('td');
    tr.appendChild(td);
    tbody.appendChild(tr);
    table.appendChild(tbody);
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    range.insertNode(table);
    range.setStartAfter(td);
  }
});

在上面的示例中，我们在按下Tab键时创建了一个新的表格并将其插入到当前光标位置。我们首先创建表格元素、tbody元素、tr元素和td元素，并通过appendChild()函数将它们添加到彼此之间。最后，我们将表格添加到当前光标位置并将光标设置到td元素后面。