一、可编辑的div 和 placeholder效果

关键点：contenteditable属性

标签的contenteditable属性可以设置元素内容是否可以编辑，属性值为true，可以编辑

id = " inputContent " class = " edit " placeholder = " 请在这输入内容 " contenteditable = " true " onblur = " blurEdit " onfocus = " focusEdit " oninput = " changeText " > </ div >

此时placeholder是不生效的，要实现此效果需要进行样式设置。

.edit[contenteditable]:empty:before {
  content: attr(placeholder);
  color: #cccccc;
.edit[contenteditable]:focus {
  content: none;
效果如下：
  
二、在光标位置插入元素
 
1. 获取div输入的内容
 
关键点：innerText 获取元素内的文本内容
 如果需要在失去焦点时获取输入的内容，则监听blur事件： οnblur=“blurEdit” 
// 失去焦点时获取
function blurEdit(){
  let inputText = document.getELementById('inputContent').innerText
2.在光标位置插入按钮
 
关键点：window.getSelection().getRangeAt(0) 获取光标位置
 
 在div内输入内容后，点击按钮，会在div的光标处插入一个按钮。
 思路：在div失去焦点时，获取光标的位置，点击按钮时在该位置插入一个节点。 
    class="edit"
    id="inputContent"
    contenteditable="true"
    placeholder="请在这输入内容" 
    onblur="blurEdit()"></div>
  <button onclick="clickInsert()">点击插入一个按钮</button>
</body>
<script>
let position = ''
function blurEdit() {
  position = window.getSelection().getRangeAt(0)
function clickInsert() {
  if(position === ''){
    // 如果div没有光标，则在div内容末尾插入
    const div = document.getElementById('inputContent')
    div.focus()
    const range = window.getSelection()
    range.selectAllChildren(div)
    range.collapseToEnd()
    position = window.getSelection().getRangeAt(0)
  // 创建一个元素
  const span = document.createElement('span')
  // 插入的按钮不可编辑，设置contenteditable为false
  span.innerHTML = '<button contenteditable="false" class="btn" id="btn1">插入的按钮1</button>'
  // 将按钮插入
  position.insertNode(span)
</script>
实例：在div中输入内容，将鼠标移到某位置，然后点击按钮，将会在该位置插入一个按钮。
 
 点击
 
                    js实现可编辑的div，并在光标处插入元素定义一个可以编辑的div，用户可以输入内容，并根据需要在光标处插入HTML元素或文本内容。并且实现placeholder的效果文章目录js实现可编辑的div，并在光标处插入元素一、可编辑的div 和 placeholder效果二、在光标位置插入元素1. 获取div输入的内容2.在光标位置插入按钮一、可编辑的div 和 placeholder效果关键点：contenteditable属性标签的contenteditable属性可以设置元素内容是否
				本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：
首先要让DIV启用编辑模式
 代码如下:
通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。
不扯话题了。下面说怎么获取或设置光标位置.
2个步骤：
① 获取DIV中的光标位置
② 改变光标位置
 代码如下:var cursor = 0; // 光标位置  
[removed] = f
selectionStart：光标选区开始位置；
selectionEnd：光标选区结束位置
setSelectionRange ：设定 或  元素中当前选中文本的起始和结束位置。语法：
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
参数说明：
如果 selectionEnd 小于 selectionStart，则二者都会被看作 selectionEnd
<title>Div 光标位置 插入 文字 或 HTML</title>
<script language="javascript" type="text/javascript">
var range;
    function getPos()
				下面是代码: 代码如下:——————————————————————————–<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” ><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>JS在文本域鼠标指定位置插入
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>循环渲染列表</ti