因为有个同学想做一个留言板功能可以加图片，类型和QQ空间留言板和百度贴吧发帖一样，同时发现它在线。这方面的交流很少，所以发表这篇文章作为催化剂，希望对广大学习者有所帮助，同时也希望大佬们能对本文和我的代码多多指教写了。主要使用原生JS，调用SelectionAPI结合html的contentible函数实现功能。1、先来看看效果。二、主要功能1、在当前光标位置添加指定图片，=点击修改图片大小2、修改选中文字的大小、字体颜色并添加斜体、粗体、下划线3、代码及一些难的部分先看一个非常非常关键和重要的函数functiongetSelectionRange(){varselect;//兼容处理if(window.getSelection){select=window.getSelection();范围=select.getRangeAt(0);//获取选择对象，获取范围对象}elseif(document.selection){//IE浏览器range=document.selection.createRange();//IE可以直接获取};};该函数是调用selecitonAPI并使用range保存当前光标位置，方便后面插入图片和为代码修改文字样式。另一个重要的函数是//insertnodefunctioninsert(newNode){varfragNode=document.createDocumentFragment().appendChild(newNode);//创建一个文档片段，放入一个新的节点range.deleteContents();//删除Rnge中的内容range.insertNode(fragNode);//插入一个新的片段}这个函数接收一个新的形状，就是要插入anode参数，然后删除当前位置的内容（如果选中的文本是当前选中的文本，则删除当前选中的文本），最后将新建的节点插入到光标位置。我们再来看看另一个比较难的部分，就是获取选中的文本。这里我使用鼠标监听事件，mousedown->mousemove->mouseup，分别监听判断鼠标是否移动，获取鼠标选中。Text//获取选中的字符edit.addEventListener("click",function(){getSelectionRange();//获取Range});edit.addEventListener("mousedown",function(){edit.addEventListener("mousemove",listenMove);});functionlistenMove(){moved=true;};edit.addEventListener("mouseup",function(){if(!moved){return;}//只有选中内容时才操作edit.removeEventListener("mousemove",listenMove);getSelectionRange();selectTxt=range.toString();//从对象中提取选中内容，直接转为字符串moved=false;});先在mousedown函数中获取一次范围，然后在mouseup函数中再次获取范围，获取选中的文本，用selectTxt保存。个人认为，这里只要思路清晰就很容易理解。至此，我们已经解决了几个棘手的问题，剩下的插入文字和图片、改变图片大小就是非常简单的基本操作了。我以插入图片为例。拿到代码就可以想办法插入文字了：//如果既有本地上传图片也有网络图片地址，只插入网络图片console.log(txt.value)if(txt.value){imgSrc=txt.value;txt.value="";}addImg(imgSrc);insertImg.style.display="none";}functionfileChange(){varval=this.value.toLowerCase().split('.');if(val){if(val[1]=='gif'||val[1]=='png'||val[1]=='jpg'||val[1]=='jpeg'){varreader=newFileReader();reader.onload=function(e){imgSrc=e.target.result;}reader.readAsDataURL(this.files[0]);}else{alert("目前支持gif、png、jpg、jpeg格式的图片！")}}}functionaddImg(src){varnewImg=newImage();newImg.className="insertNewImg";newImg.src=源码；insert(newImg);}这里需要特别说明一下，如果插入的是本地图片，因为浏览器为了安全限制了file.value，并不是图片的真实地址。也就是说img.src=file.value是获取不到图片的。所以这里需要借用FileReader对象来获取真实的图片地址。当然这里也可以直接使用网络的图片地址，然后将获取到的src地址传入addImg函数，生成img节点，插入当前光标指向的文字位置。所以添加文本样式也是同一个方法，无非就是在创建文本节点后添加一个样式style。所以按照这个方法，读者可以根据自己的需要添加更多的功能，比如：在编辑框中插入一个可点击的a标签或者添加一个代码块……希望能看懂本文的读者，能一起交流下面，还望大佬指正，谢谢！！！GitHub地址：https://github.com/LiChangyi/...
