Home > Developer > JavaScript
So with this:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> </pead> <body> <style type =" text/css "> # directEditorSpan input {border: 1px solid # ccc; background-color: # fff; color: #696969; float: left ;}# info {border-collapse: collapse ;}# info td {border: 1px solid # ccc; text-align: left; padding-left: 10px; line-height: 20px; width: 100px; font-size: 12px ;} </style> <table id = "info"> <tr> <td> name </td> <td> progresstudy </td> </tr> <td> age </td> <td> 22 </td> </tr> <td> occupation </td> <td> Student </td> </tr> </table> </script> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
This method is written in a way similar to Java, including private methods, private attributes, and public methods (the method used most in the past ).
That is, the similar form:
Copy codeThe Code is as follows:
Var Deditor = (function (){
// Private method
// Private prototype
Return function (){
// Public method
};
})();
I first wrote the general framework:
Copy codeThe Code is as follows:
Var Deditor = (function (){
// Private method
Function addEvent () {}// add event
Function fixEvent () {}// compatible with event objects
Function addLinkCss () {}// add an external style
Function createEditorFile () {}// create necessary HTML
Function addEvents () {}// bind an event to the newly created Element
Function fileToContext () {}// Edit to text
Function contextToFile () {}// convert text to edit
Function save () {}// save
Function cancel () {}// discard
// Private prototype
Var currentContext; // The current edited content.
Var html; // newly created html Object
Var url; // AJAX request to save the content
Var currentElem; // The current element
Var elems = []; // all locally editable Elements
Var elemItems ={}; // all newly created nodes
Return function (){
// Public method
This. thenEffect () {}// sets all the elements that can be edited in place.
This. setUrl () {}// set the url Value
This. setCssHref () {}// sets the href of the external css.
}
})();
The rest of the work is to implement all the methods and improve them.
Maybe I should be the first language to seriously learn java. All the writing styles in this form have made my mind clearer and I have successfully completed this process.
There are two problems encountered in the next debugging process. It is necessary to mention here that we may encounter problems in future programming.
One is caused by event bubbles:
When you click the text box or button, the Editable domain is automatically hidden because the parent node captures the mouse click event and executes the fileToContext () function.
Second, using innerHTML in IE to clear the content will completely remove the child node from the memory, but if you use alert (html) for detection, it also displays this as a node object.
It is recommended that you use removeNode to remove a node, if you plan to use it later.
Now the 'Local editor' is basically complete (AJAX support is required), but there is a problem that it cannot be inherited (I haven't thought of an inherited method yet ), at that time, I was speechless. This method does have limitations.
To sum up, make sure you plan the encoding mode to use that mode or another mode.
Finally, if I have written anything wrong or have any suggestions, please correct them. This is also the purpose of my blog.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
