自從HTML5中新引入了contentEditalbe屬性以後，div就與textarea一樣，可以作為最常用的編輯器使用。
1.啟用div作為編輯器 讓div進入編輯狀態很簡單，只需要：
復制代碼代碼如下:
div.contentEditable=true;
這樣就可以進入編輯狀態。當然你直接在html中設置contenteditable也是可以的。
總的來說，實現可視化編輯，可以使用contentEditable和designMode兩種方法。contentEditable剛開始在IE上實現，後來各大浏覽器陸續支持contentEditable，HTML5標准也包含contentEditable。designMode只能把document整體改成可編輯狀態，但contentEditable可以把任何HTML元素改成可編輯狀態，應用范圍比designMode廣，用 contentEditable是將來的趨勢。
contentEditable與draggable有時是沖突的，當contentEditalbe=true時，一般要將draggable(如果有的話)設為false，否則不能編輯。
2.編輯div內容的時候，支持回車確認修改：
這個實現很簡單，事件回調中判斷一下event的鍵值就可以了：
復制代碼代碼如下:
htmlElement.contentEditable = false;
if (event.keyCode == 13) {
htmlElement.blur();
}
3.判斷是否按下Shift+Enter，按下則換行 這個實現道理同上，比較簡單：
復制代碼代碼如下:
if(event.shiftKey && event.keyCode==13) {
return;
}
這個是在Chrome上的實現，不用做任何處理，直接return返回即可。在FireFox中需要這樣添加<br>來實現換行：
復制代碼代碼如下:
if(event.shiftKey && event.keyCode==13) {
var text = htmlElement.textContent;
htmlElement.innerHTML = text + '
';
return;
}
4.編輯div內容的時候，禁止換行 這裡看與內容編輯超出後如何處理相關的幾個CSS屬性：
復制代碼代碼如下:
width: 80px; ----這行限制了div的寬度。
text-overflow:clip; ---多出的文本不換行也不省略。（這行如果設置成ellipsis則溢出時顯示省略標記（...））
white-space:nowrap; -----強制文本在一行內顯示
overflow:hidden; ------------------將溢出文本隱藏
word-wrap: break-word;------設置自動換行
通常設置前面2個就可以達到效果，如果有一些其他的需求，可以加上後面的幾個屬性。
5.去掉編輯時的div周圍的焦點框
在CSS中設置outline:none;或者設置outline:0;即可。
6.Div進入編輯狀態後選中所有的文本 這個使用selection對象的modify(alter, direction, granularity)方法可以實現。該方法用於改變焦點的位置，或擴展、縮小selection的大小。使用這個方法的可以實現多種全選，移動焦點等操作。下面是各個參數的含義：
alter：改變的方式。”move”，用於移動焦點；”extend”，用於改變selection。
direction：移動的方向。可選值forward | backword或left | right。
granularity：移動的單位或尺寸。可選值，character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", or "documentboundary"。
Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1以後的版本才會支持此函數， 官方文檔：https://developer.mozilla.org/en/DOM/Selection/modify。
下面的例子是當div進入編輯狀態後，選中所有文本：
復制代碼代碼如下:
if (window.getSelection) {
var sel = window.getSelection();
sel.modify('move','left','documentboundary');
sel.modify('extend','right','documentboundary');
}
遺憾的是FireFox的實現不支持"sentence", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary", "documentboundary"參數。需要修改一下思路，用line參數實現：
復制代碼代碼如下:
var isFireFox = function() {
var ua = navigator.userAgent.toLowerCase();
return !!ua.match(/firefox\/([\d.]+)/);
};
if (isFireFox()) {
var count = htmlElement.innerHTML.split('
').length;
for (var i = 0; i < count; i++) {
sel.modify('extend', 'right', 'line');
}
}
7. 設置div的滾動條自動滾到最後的位置
這裡要用到div的幾個有用的屬性：scrollTop、scrollLeft、scrollWidth、scrollHeight。先看下面的實現示例：
復制代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="滾動條, scrollbar, 頁面底部, 聊天窗口, " />
<meta name="description" content="有些時候（如開發聊天程序），我們需要將將滾動條（scrollbar）保持在最底部，比如聊天窗口，最新發出和收到的信息要顯示在最下方，如果要看到最下方的內容，就必須保證滾動條保持在最底部。"/>
<title>將滾動條（scrollbar）保持在最底部的方法 - 滾動條, scrollbar, 頁面底部, 聊天窗口, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">將滾動條（scrollbar）保持在最底部的方法</h3>
<div id="example_main">
<!--************************************* 實例代碼開始 *************************************-->
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '
';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice">請點擊“插入一行”按鈕，插入最新信息，當出現滾動條時，滾動條將自動保持在底部。</span>
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;"></div>
<input type="button" value="插入一行" onclick="add();">
<!--************************************* 實例代碼結束 *************************************-->
</div>
</div>
</body>
</html>
滾動到最下面就是設置div.scrollTop = div.scrollHeight;即可。scrollHeight是內部元素的絕對寬度，包含內部元素的隱藏的部分。scrollLeft 也是類似道理，滾動到最右邊的話就是設置div.scrollLeft = div.scrollWidth;即可。
此外，結合div的offsetHeight，offsetLeft等自身相關度量屬性，可以很方便進行滾動條位置的控制。
8.div輸入框高度自適應 高度自適應的意思是說：隨著輸入的行數越來越多，輸入框會越來越高，當到一定高度後再出現垂直的滾動條。
作為多行文本域功能來講，textarea滿足了我們大部分的需求。然而，textarea有一個不足就是不能像普通div標簽一樣高度可以跟隨內容自適應。textarea總是高度固定的。有時候，為了增加交互體驗想讓文本域高度自適應的時候，就會遇到麻煩。當然，你還是可以通過使用JS來控制高度，實現自適應。實際上，這裡我們就可以使用div去模擬這樣的效果。下面是來自網友的一個實現：
HTML代碼：
復制代碼代碼如下:
<div class="testbox" contenteditable="true"></div>
對應的CSS代碼：
復制代碼代碼如下:
.testbox {
width: 400px;
min-height: 120px;
max-height: 300px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
}
其實很多的實現都來源於網上，這裡對廣大網友表示真摯的感謝！這裡的很多問題也有很多別的實現方式，這裡還是鼓勵大家積極思考，把相應的知識變成自己的東西！