html contenteditable

　　contenteditable 是html中的一個屬性，在HTML中，某些元素設置 contenteditable='true'  屬性時可以開啟該元素的編輯模式，contenteditable 可以讓div 或整個網頁，或者span等等元素設置為可寫，我們最常用的是 input 、textarea 文本輸入元素來輸入內容，但這些也只能夠輸入純文本，而 contenteditable 開啟後能夠輸入html內容。

如果想在整個網頁可編輯，請在 body 標籤內設置 contenteditable

contenteditable 已在 html5 標準中得到有效的支持

　　使用方法：

　　<div contenteditable='true'></div>

　　HTML5 中的解釋與規定：

contenteditable是一個枚舉類型的屬性，可供選擇的值有空字符串、 true、 false 或 inherit （默認） 。

當為空字符串時，效果和true一致。

當一個元素的 contenteditable 狀態為 true （contenteditable 屬性為空字符串，或為true，或為inherit且其父元素狀態為true）時，意味著該元素是可編輯的。否則該元素不可編輯。 

注意：HTML5 與 HTML4的不同，對於contenteditable HTML5 是趨於xhtml，使用的是全小寫 contenteditable，而 HTML4使用的是 contentEditable

 

在最近的一次網站開發的過程中，有一個頁面需要給用戶填寫一些要提交的文本信息，剛開始的時候是用 textarea ，功能就需要讓用戶可以插入圖片，若只是填寫純文本。textarea 已經可以做到，但是現在是要用戶能夠上傳圖片並且插入編輯框 ，剛開始的思路是用一個iframe把圖片上傳了，當用戶點擊確定的時候，。獲取裏面已經上傳的圖片地址。然後用文本的格式做個標識添加到 textarea 裏面，像 [iamges:http://....jpg/] ，點擊取消的時候就用 ajax 把圖片地址傳到 php 將這些圖片從服務器端刪除。基本的思路簡單明了，但是我該怎麼去獲取到要插入文本的位置呢，於是我查找相關資料，查到後我把文章轉到了我的博客裏面： http://www.cnblogs.com/helin/p/3401810.html

似乎離我想要的效果越來越近了，不過後來發現如果是這樣的方式去實現的話，有兩個缺點，一是用戶體驗不好，用戶當然想直接就在文本框裏面顯示，這樣好排版還有操作，看起來也好，若就一條標識字符串。很容易就被截開幾段在中間再插入內容。這樣一來，到時候顯示就成問題了。第二個就是 textarea默認不是自適應高度的，。也就是說你如果內容一多了，。文本框不會往下拉，那就會出現滾動條，看起來也不好看，想要自適應，用js去實現也不是不可以，但有沒有更好的辦法呢。既能直接插入html內容，。又可以自適應高度，我不需要像文本編輯器那些一樣，功能那麼的強大。我只要一個最最最簡單的，可以插入圖片，可以自適應高度就可以了，。於是又要一輪的搜索資料了，不料印象中記得html 元素有個屬性是可以讓元素開啟編輯模式的，然後到QQ空間裏面查看了一下人家的是怎麼做到插入圖片的，讓我記起來了，contenteditable 這個屬性，哈哈，這樣太好了，這是一個好的開始，。那現在的問題就是把textarea 用一個元素替換，再設置一下 contenteditable 屬性，我選擇了div，給它設置了一個最小高度。

現在就可 以直接把上傳好返回的圖片地址或者加進來的遠程的圖片地址直接封閉成html的形式插入到編輯框裏面了。但是div在可編輯狀態下面並不能像textarea 那樣子獲取到編輯框的焦點到底在哪個位置上面，此時，我用到了一個 javascript 裏面的 execCommand 方法，這個方法的一些說明在我的博客： http://www.cnblogs.com/helin/p/3433357.html

document.execCommand('InsertImage', false,imgsrc);

　　現在開始有點樣子了，但是除了圖片還有一些基本的排版的html標籤之外，我不想用戶過多的插入一些其他的html。例如字體加粗，下劃線等，也就是雖然我沒有給用戶提供更多的操作這些功能的按鈕，但是防止不了用戶去複製別人的html，然後粘貼進來，所以我要想辦法做一些過濾，這時候我應該要監聽粘貼命令：

if(divEdit.addEventListener){

        divEdit.addEventListener("paste",pasteFilter,false);

    }else{//IE

        divEdit.attachEvent("onpaste",pasteFilter);

    }

　　一但有這個操作，我就要確保在內容粘貼出來前或者後進行一些處理：

function pasteFilter(){

    var clipb  = event.clipboardData || window.clipboardData;

    try{

        var cHtml = clipb.getData('text/html');

        cHtml = HtmlFilter(cHtml);

        document.execCommand('inserthtml', false,cHtml);

        event.preventDefault;

        event.returnValue = false;

    }catch(e){//IE下面的操作

        setTimeout(function(){editDiv.innerHTML = HtmlFilter(editDiv.innerHTML);},1);

    }    

}

　　上面這一步我有分了兩部分，在ie外的其他瀏覽器下面，（當然我只測試過firefox，chrome）try裏面適合不是ie瀏覽器下面的，因為在ie下面javascript 的 clipboardData 對象的 getData方法裏面不支持 text/html ，只支持text ，而且在ie下面，也不支持 execCommand 裏面的inserthtml 參數， 所以在我沒有找到其他更好辦法之前，我也只能做這樣的處理，ie下面我用到了setTimeout的方法，原理就是在粘貼數據的那一刻，同時執行HtmlFilter這個方法，對編輯框裏面的html作過濾，這個方法有不好之處就是當粘貼那一刻，用戶是能看到粘貼過來的樣式等等效果的，只不過以最快的速度再一次將編輯框裏面的內容用js去進行一遍的過濾罷了，這方法雖然不好，但基本能達到我現在想要的要求。

function HtmlFilter(html){

    html = html.replace(/(style|class|id)[=\s]+?".*?"/ig,'');

    html = html.replace(/<\!--(Start|End)Fragment-->/ig,'');

    return html;

}

　　當然，用js過濾一遍，這只不過適合於大多數的情況下，若用戶提交了沒有經過過濾的html內容，這時候，也只能夠在服務器端進行最終的過濾了。