摘要：主要采用了原生與調(diào)用結(jié)合的功能實(shí)現(xiàn)功能。所以根據(jù)這種方法，讀者可以根據(jù)自己的需求添加更多的功能，比如在編輯框里面插入一個(gè)可以點(diǎn)擊的標(biāo)簽或者添加一個(gè)代碼塊希望能讀到此文章的讀者，能在下方一起交流，更希望大佬提出錯(cuò)誤，謝謝地址

因?yàn)橐粋€(gè)同學(xué)，要做一個(gè)能加入圖片的留言板功能，類(lèi)型與QQ空間留言板和百度貼吧發(fā)帖的那種形式，同時(shí)在網(wǎng)上找了找發(fā)生網(wǎng)上對(duì)這方面的交流很少，所以發(fā)表這篇文章拋磚引玉，希望能幫助廣大的學(xué)習(xí)者，也同時(shí)希望大佬能對(duì)此文章及本人寫(xiě)的代碼，不吝賜教。
主要采用了原生JS與調(diào)用Selection API結(jié)合html的contentible功能實(shí)現(xiàn)功能。

1.先來(lái)看看效果

2.主要功能

1.在當(dāng)前光標(biāo)位置添加指定圖片，并=點(diǎn)擊以后修改圖片大小
2.修改選中文字的大小，字體顏色及添加斜體、粗體、下劃線(xiàn)

3.代碼及一些難點(diǎn)部分
首先看一個(gè)很很很關(guān)鍵和重要的函數(shù)

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

這個(gè)函數(shù)是調(diào)用seleciton API并用range保存當(dāng)前光標(biāo)位置，方便后面插入圖片和給代碼修改文字樣式

其次另外一個(gè)也很關(guān)鍵的函數(shù)是

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

這個(gè)函數(shù)接收一個(gè)新的也就是要插入節(jié)點(diǎn)的形參，然后刪除當(dāng)前位置的內(nèi)容（如果選中的是文字這把當(dāng)前這選中的文字刪除掉）最后把新創(chuàng)建的節(jié)點(diǎn)插入到光標(biāo)的位置。

我們?cè)趤?lái)看看另外一個(gè)難點(diǎn)部分，就是獲取選中的文字，，這里我采用的是鼠標(biāo)的監(jiān)聽(tīng)事件，mousedown->mousemove->mouseup，分別的監(jiān)聽(tīng)，來(lái)判斷是否鼠標(biāo)發(fā)生移動(dòng)，及得到鼠標(biāo)選中的文本

//獲取選中的字符
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;
    }
    //當(dāng)有選中內(nèi)容才進(jìn)行操作
    edit.removeEventListener("mousemove",listenMove);
    getSelectionRange();
    selectTxt= range.toString();//將選擇的內(nèi)容從對(duì)象中提取出來(lái),直接轉(zhuǎn)字符串就行了。
    moved = false;
});

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

//插入圖片
var imgSrc="";
aInsertBtn[0].onclick=function(){
    var txt=document.getElementById("txtImg");
    //如果同時(shí)存在本地上傳圖片和網(wǎng)絡(luò)圖片的地址，只插入網(wǎng)絡(luò)圖片
    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);
}

這里需特別的說(shuō)明一下，如果是插入的是本地圖片，由于瀏覽器為了安全限制file.value并不是圖片的真實(shí)地址，換句話(huà)說(shuō)img.src=file.value是得不到圖片的，所以這里我們需要借用FileReader對(duì)象來(lái)得到真實(shí)的圖片地址，當(dāng)然這里網(wǎng)絡(luò)的圖片地址肯定是可以直接用的，然后將的到的src地址傳入addImg函數(shù)生成img節(jié)點(diǎn)以后插入當(dāng)前光標(biāo)指向的文本位置。
所以添加文本樣式也是一樣的方法，無(wú)非就是在創(chuàng)建完文本節(jié)點(diǎn)以后給他添加style樣式。

所以根據(jù)這種方法，讀者可以根據(jù)自己的需求添加更多的功能，比如：在編輯框里面插入一個(gè)可以點(diǎn)擊的a標(biāo)簽或者添加一個(gè)代碼塊.....

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