contenteditable 是html中的一個屬性，在HTML中，某些元素設置 contenteditable='true' 屬性時可以開啟該元素的編輯模式，contenteditable 可以讓div 或整個網頁，或者span等等元素設置為可寫，我們最常用的是 input 、textarea 文本輸入元素來輸入內容，但這些也只能夠輸入純文本，而 contenteditable 開啟後能夠輸入html內容。
如果想在整個網頁可編輯，請在 body 標籤內設置 contenteditable
contenteditable 已在 html5 標準中得到有效的支持
使用方法：
<div contenteditable='true'></div>
HTML5 中的解釋與規定：
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內容，這時候，也只能夠在服務器端進行最終的過濾了。