Since HTML5 introduces contentEditalbe attribute, div, and textarea, can be used as the most common editors.
1. Enable the div as editor
code is as follows:


div. ContentEditable=true;

so you can enter the edit state. Of course, you directly in HTML set contenteditable is also possible.
overall, realizes the visual editor, you can use contentEditable and designMode two ways. ContentEditable initially implemented on IE, later on all major browsers support contentEditable in succession, the HTML5 standard also contains contentEditable. DesignMode can only change the document as a whole into editable state, but contentEditable can turn any HTML element into an editable status, application range wide than designMode, using contentEditable is the trend of the future.
contentEditable and draggable sometimes conflict, when contentEditalbe=true, the general will be draggable (if any) is set to false, or not.
2. Edit the content of the div, support the return confirm modify
code is as follows:


htmlElement. ContentEditable=false;
the if (event. KeyCode==13) {
htmlElement. The blur ();
}

3. Determine whether press Shift + Enter, press the line breaks
code is as follows:


the if (event. ShiftKey & & event. The keyCode 13)=={
the return;
}

this is the implementation on the Chrome, need not do any processing, direct return back. Need this in FireFox add <Br> To implement the line:

  code is as follows:  


the if (event. ShiftKey & & event. The keyCode==13) {textContent.
var text=htmlElement.;
htmlElement. InnerHTML=text + '
';
the return;
}

4. Edit the content div, ban line breaks
code is as follows:


width: 80 px; Line - which limit the width of div.
text - overflow: clip; - the extra text non-breaking is not omitted. (this line if the ellipsis into the overflow displayed when omit labeling (...))
white - space: nowrap; -- -- -- -- -- forced text within a line show
overflow: hidden; -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- will overflow text hidden
word - wrap: break - word; -- -- -- -- -- - set up automatic line feed

are usually set up in front of the two can achieve effect, if you have other demand, can add the back of the several properties.
5. Remove the div when editing the focus around box

code is as follows:


if Windows. GetSelection () {window.
var sel=getSelection ();
sel. Modify (' move ', 'left' and 'documentboundary');
sel. Modify (' extend ', 'right' and 'documentboundary');
}

it is a pity that the realization of the FireFox doesn't support " Sentence" , " Paragraph" , " Lineboundary" , " Sentenceboundary" , " Paragraphboundary" , " Documentboundary" Parameters. Need to revise the way of thinking, with the line parameter implementation:

  code is as follows:  


var isFireFox=function () {
var ua.=the navigator userAgent. ToLowerCase ();
return!!!!! Ua. Match (/firefox \/((\ d) +));
};
the if (isFireFox ()) {
var count=htmlElement. The innerHTML. Split ('
'). The length;
the for (var I=0; I <count; i++) {
sel. Modify (' extend ', 'right' and 'line');

}}

7. Set the div scroll bar automatically go to the final location of the

code is as follows:


<! PUBLIC DOCTYPE HTML "-///DTD/W3C 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="the scroll bar, the scrollbar at the bottom of the page, the chat window,"/>
<Meta name="description" content="in some cases (e.g., development of chat program), we need to hold the scroll bar (scrollbar) at the bottom of the chat window, for example, the latest send and receive messages to display in the bottom, if you want to see the bottom of the content, you must ensure that scroll bar at the bottom."/>
<Title> Will scroll bar (scrollbar) remain in the method, the scroll bar at the bottom of the scrollbar, the bottom of the page, the chat window, </title>
</head>
<Body>
<Div id="example" >
<H3 id="example_title >" Will be at the bottom of the scroll bar, the scrollbar) stay in the way </h3 >
<Div id="example_main >"
<! - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * example code start * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, >
<The script type="text/javascript" >
function to the add ()
{
var now=new Date ();
var div=document. GetElementById (" scrolldIV ");
div. The innerHTML=div. The innerHTML + 'time_' + now. The getTime () + "
';
div. The scrollTop=div. ScrollHeight;
}
</script>
<Span class="notice" >Please click &other; Insert a line &throughout; Buttons, insert the latest information, when there is a scroll bar, the scroll bar will automatically remain at the bottom. </span>

<Div id="scrolldIV" style="overflow: auto; height: 100 px; width: 400 px; border: 1 px solid # 999;" ></div>
<Input type="button" value="http://www.jb51.net//web/insert a line >"
<! - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * end of the example code * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, >
</div>
</div>
</body>
</html>

scroll to the bottom is set div. The scrollTop=div. ScrollHeight; Is ok. ScrollHeight is the absolute width of internal elements, including the hidden part of the internal elements. ScrollLeft similar truth, scroll to the right word is set div. ScrollLeft=div. ScrollWidth; Is ok.
in addition, the combination of div offsetHeight, their related measure properties, such as the offsetLeft position can be very convenient for the scroll bar control.
8. Div input box highly adaptive
code is as follows:


<Div class="testbox" contenteditable="true" ></div>

the corresponding CSS code:

  code is as follows:  


testbox {
width: 400 px;
min - height: 120 px;
Max - height: 300 px;
margin - left: auto;
margin - right: auto;
the padding: 3 px;
the outline: 0;
border: 1 px solid # a0b3d6;
the font - size: 12 px;
word - wrap: break - word;
overflow -x: hidden;
overflow - y: auto;
}

so many implementations, found on the Internet to people here said the sincere thank you! Here a lot of problems there are also many other ways of implementation, and here is to encourage people positive thinking, and the corresponding knowledge into their own things!
# 0 - #


This concludes the body part