1, what is the HTML online editor
As the name suggests, an online editor is a tool for online editing, edited with HTML based documents.
What's the use of the 2,html online editor?
Because the HTML online editor can be used to edit an html-based document online, it is often used for message board messages, forum posts, blog writing logs, or where users need to input plain HTML.
3, what is DHTML
DHTML is the integration of some existing Web technologies and standards, through which web design can create Web pages in a new way.
4,dhtml and HTML relationships
DHTML is based on the HTML language, but compared to the simple HTML to design a Web page, the biggest change in HTML is that it joins the "object-oriented" features of the Web page. The Dynamic HTML object model defines an object that describes a Web page and its internal elements, each with a property that describes its own state and a method that describes its behavior, and that can handle a particular type of event, so that Web page designers can control or invoke these objects through the script program.
The relationship between 5,dhtml and the HTML online editor
DHTML is needed to do an online editor, because the HTML online editor needs to "dynamically" change the properties of the Web object as it is being edited online, and DHTML satisfies that need.
What are the HTML online editors
http://www.cnbruce.com/blog/showlog.asp?cat_id=27&log_id=1021
The fundamentals of the HTML online editor
Reproduced from: http://www.lfda.gov.cn/bbsxp/ShowPost.asp?ThreadID=692
Look at the online editor that is now popular online, also can't help but want to understand the principle. Under the most widely used ewebedit, this is the most powerful open source online editor I have ever seen ... Study for a day, finally know the core principle.
First explain the principle of the online editor: First you need to IE5.0 the above version of support. Because IE5.0 above version has an edit state, you can enter text in an IFRAME. Then through "Document.body.innerHTML" can get the HTML code inside the IFRAME, this is the key. How can you make ifrmae in edit state, you can use:
function Document.onreadystatechange ()
{
Htmledit.document.designmode= "on";
}
function implementation. The remaining problem is to get the focus and the selected values:
Htmledit.focus ();
var sel = HtmlEdit.document.selection.createRange ();
The above 2 sentences can get the HTML code of the selected value.
Here, the fundamentals are clear, and then we can use the inserthtml ("str") method to replace the HTML characters with the selection values. Here's a simple demo to demonstrate an online editor with only bold effects. I use here a textarea to or get an IFRAME in the HTML value, the actual situation, you can set the textarea display to false, and then you can submit the content of the IFRAME.
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <script language=" javascript > Function Getiframedata () {document.form1.test.value= HtmlEdit.document.body.innerHTML; function Sentiframedata () {htmledit.document.body.innerhtml=document.form1.test.value; function DoB () {htmledit.focus (); var sel = HtmlEdit.document.selection.createRange (); Inserthtml ("<b>" +sel.text+ "</b>"); The function inserthtml (HTML) {if (HtmlEdit.document.selection.type.toLowerCase ()!= "None") {HtmlEdit.document.selecti On.clear (); } HtmlEdit.document.selection.createRange (). pastehtml (HTML); function Document.onreadystatechange () {htmledit.document.designmode= "on"; } </script> </pead> <body> <form action= "Test.asp?act=add" method= "Post" Name= "Form1" > ; IFRAME id=htmledit marginwidth=0 marginheight=0> </IFRAME> <textarea name= "test" rows= "a" id= "test" >& Lt;/textaRea> <input type= "Submit" name= "Submit" value= "submitted" > <input type= "button" value= "Iframe->textarea" Oncl Ick= "Getiframedata ()" > <input type= "button" value= "Textarea->iframe" onclick= "Sentiframedata ()" > < Input type= "button" value= "B" onclick= "DoB ()" > </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/2 page
12 Next read the full text
