原生JS寫一個功能強大的編輯器

由於一個同窗，要作一個能加入圖片的留言板功能，類型與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/...