摘要：主要采用了原生與調用結合的功能實現功能。所以根據這種方法，讀者可以根據自己的需求添加更多的功能，比如在編輯框里面插入一個可以點擊的標簽或者添加一個代碼塊希望能讀到此文章的讀者，能在下方一起交流，更希望大佬提出錯誤，謝謝地址

因為一個同學，要做一個能加入圖片的留言板功能，類型與QQ空間留言板和百度貼吧發帖的那種形式，同時在網上找了找發生網上對這方面的交流很少，所以發表這篇文章拋磚引玉，希望能幫助廣大的學習者，也同時希望大佬能對此文章及本人寫的代碼，不吝賜教。
主要采用了原生JS與調用Selection API結合html的contentible功能實現功能。

1.先來看看效果

2.主要功能

1.在當前光標位置添加指定圖片，并=點擊以后修改圖片大小
2.修改選中文字的大小，字體顏色及添加斜體、粗體、下劃線

3.代碼及一些難點部分
首先看一個很很很關鍵和重要的函數

function getSelectionRange() { 
    var select;
    //兼容處理
    if (window.getSelection) { 
        select = window.getSelection();
           range = select.getRangeAt(0);//獲取selection對象,并獲取range對象
    } else if (document.selection) { 
        //IE瀏覽器
        range = document.selection.createRange();//IE可以直接獲取
    };
};

這個函數是調用seleciton API并用range保存當前光標位置，方便后面插入圖片和給代碼修改文字樣式

其次另外一個也很關鍵的函數是

//插入節點
function insert(newNode){
    var fragNode = document.createDocumentFragment().appendChild(newNode);//創建文檔碎片并放入新節點
    range.deleteContents();//刪除Rnge中的內容
    range.insertNode(fragNode);//再插入新碎片
}

這個函數接收一個新的也就是要插入節點的形參，然后刪除當前位置的內容（如果選中的是文字這把當前這選中的文字刪除掉）最后把新創建的節點插入到光標的位置。

我們在來看看另外一個難點部分，就是獲取選中的文字，，這里我采用的是鼠標的監聽事件，mousedown->mousemove->mouseup，分別的監聽，來判斷是否鼠標發生移動，及得到鼠標選中的文本

//獲取選中的字符
edit.addEventListener("click",function(){
    getSelectionRange();//獲取Range
});
edit.addEventListener("mousedown",function(){
    edit.addEventListener("mousemove",listenMove);
});
function listenMove(){
    moved=true;
};
edit.addEventListener("mouseup",function(){
    if(!moved){
        return;
    }
    //當有選中內容才進行操作
    edit.removeEventListener("mousemove",listenMove);
    getSelectionRange();
    selectTxt= range.toString();//將選擇的內容從對象中提取出來,直接轉字符串就行了。
    moved = false;
});

先在mousedown函數里面獲取一次range,然后在mouseup的函數里面再次獲取range得到選中的文字用selectTxt保存，這里在我看來只要是理清楚思路這里很好理解。
到了這里我們就已經把幾個比較困難的問題解決了，剩下的插入文字和圖片及改變圖片的大小，都是很簡單的基本操作。
我以插入圖片為例，大家可以拿到代碼以后自己理一理插入文字的思路：

//插入圖片
var imgSrc="";
aInsertBtn[0].onclick=function(){
    var txt=document.getElementById("txtImg");
    //如果同時存在本地上傳圖片和網絡圖片的地址，只插入網絡圖片
    console.log(txt.value)
    if(txt.value){
        imgSrc=txt.value;
        txt.value=" ";
    }
    addImg(imgSrc);
    insertImg.style.display="none";
}
function fileChange(){
    var val=this.value.toLowerCase().split(".");
    if(val){
        if(val[1]=="gif"||val[1]=="png"||val[1]=="jpg"||val[1]=="jpeg"){
            var reader = new FileReader();
                reader.onload = function (e) {
                imgSrc = e.target.result;                
            }
            reader.readAsDataURL(this.files[0]);
        }else{
            alert("目前支持gif,png,jpg,jpeg格式的圖片!")
        }
    }
}
function addImg(src){
    var newImg=new Image();
    newImg.className="insertNewImg";
    newImg.src=src;
    insert(newImg);
}

這里需特別的說明一下，如果是插入的是本地圖片，由于瀏覽器為了安全限制file.value并不是圖片的真實地址，換句話說img.src=file.value是得不到圖片的，所以這里我們需要借用FileReader對象來得到真實的圖片地址，當然這里網絡的圖片地址肯定是可以直接用的，然后將的到的src地址傳入addImg函數生成img節點以后插入當前光標指向的文本位置。
所以添加文本樣式也是一樣的方法，無非就是在創建完文本節點以后給他添加style樣式。

所以根據這種方法，讀者可以根據自己的需求添加更多的功能，比如：在編輯框里面插入一個可以點擊的a標簽或者添加一個代碼塊.....

希望能讀到此文章的讀者，能在下方一起交流，更希望大佬提出錯誤，謝謝！！！
GitHub地址：https://github.com/LiChangyi/...