The JS editor obtains the compatibility of selected HTML multi-browser (supports Chorme and Firefox)

Yesterday, I was ready to improve the HTML compatibility of the background editor for Chrome and FireFox. Question about how to obtain the HTML compatibility of selected content in the JS Editor: For how to obtain the selected text (including Html tags), the answer on the internet is usually: var... syntaxHighlighter. all ();

Yesterday, I was ready to improve the HTML compatibility of the background editor for Chrome and FireFox.
 
The JS editor obtains the HTML compatibility description of the selected content:
For how to obtain the selected text (including Html tags), the answer on the internet is usually:
Var deditor = document. getElementById ('iframe name'). contentWindow;
IE: deditor.pos.html Text to get the html content.
Other browsers: deditor. window. getSelection (). toString (); only obtain text that does not include html tags.
Problem: When you add a back or border to a selected text segment (including line breaks and paragraph formatting), if the html Tag is missing, only the text is left, that is not the effect you want.
 
Now that you know the problem, how can we solve JS compatibility?
 
Step 1: Network Search
I am not very good at js. In the middle of the night, I can only rely on the instinct of programmers. Baidu or Google is now searching and processing.
However, this Internet is a little bit of code, and it is always difficult to search on the Internet. It is occasionally found out, except that there is no answer, and it is also universal:
Deditor. window. getSelection (). toString () or deditor. window. getSelection (). getRangeAt (0 ).
Similarly, you can only get text, but what I want is text containing Html tags, which you should have understood.
 
Step 2: Code debugging
Find a special function in the webpage with few matching keywords: "Chrome" script debugging.
Debugging method: tool-developer tool-scripts-select the js file to be debugged.
Next, set the breakpoint on the left side, set the monitoring variables on the right side, and control the next step.
 
Unfortunately, although I have tried many attributes and methods for debugging, I still have not found the Html method for obtaining the selected content in Chorme.
Debugging is as follows:
 
 
Step 3: Repeat network search
Generally, valuable code is rarely directly displayed on the Internet. On the one hand, developers are reluctant to write articles, and on the other hand, people do not like to write articles.
Therefore, you can continue searching and extract useful code from different articles.
Finally, I don't know where it is. I saw one: selection. getRangeAt (0). cloneContents (). childNodes.

In normal thinking, what is the difference between taking the child node after cloning and directly taking the child node? But there is a difference.
 
Step 4: Repeat code debugging
Continue debugging, breakpoint, monitoring variables and values, and finally find that the cloned subnode can get the outerHTML attribute, so the problem is clear, and write a method for combination.
Function GetChormeInnerHTML (nodes)
{
Var result = '';
Var node = null;
For (var I = 0; I <nodes. length; I ++)
{
Node = nodes [I];
If (node. outerHTML)
{
Result + = node. outerHTML;
}
Else if (node. nodeValue)
{
Result + = node. nodeValue;
}
}
Return result. replace ("
","
");
}
Because Chorme generates"
", So remove the redundant identifier.
Browser compatibility, won't make you too easy
I thought the problem was solved, so I tried it in firefox. It's not feasible for firefox B.
So I used Firfox for script debugging. I found that the child node obtained under firefox has no outerHTML attribute at all, which is too tragic. I don't even have this, and the problem gets stuck again.
 
Step 5: continuous network search
The key is to switch to JavaScript under firefox to select html-related content and compatible writing. Unfortunately, on the Internet, there are confusing titles + no answer content.
After N hours of brainstorming and searching experience, I calmed down. B went back to continue debugging to see if I could discover the New World.
 
Step 6: continuous code debugging
In Firfox, there is obviously no direct answer to the values that may be generated by debugging each attribute and the values that come out.
Finally, we found that because it is a node, the node is an attribute, and the label name and content text are sufficient.
Debugging is as follows:
 

Step 7: Innovative Thinking
In the spirit of no worries, re-combine the node's outerHTML and splice the outerHTML of all nodes.
Function GetFireFoxInnerHTML (nodes)
{
Var result = '';
Var node;
For (var I = 0; I <nodes. length; I ++)
{
Node = nodes [I];
If (node. nodeValue)
Restore.
{
Result + = node. nodeValue;
}
Else if (node. tagName)
{
Result + = "<" + node. tagName;
If (node. innerHTML)
{
// Restore attributes.
If (node. attributes & node. attributes. length> 1)
{
For (var j = 0; j {
Result + = ''+ node. attributes [j]. name +" = '"+ node. attributes [j]. value + "'";
}
}
Result + = ">" + node. innerHTML +" ";
}
Else
{
Result + = "/> ";
}

}
}
Return result;
}
 
Step 8: take some time to record and share the results. You can check the results later.

Others:
In the past two or three days, I spent some time on the function. I added the Forum mode to my blog in the autumn garden, and changed my skin to a forum, saving the trouble of deploying the Forum and saving the cost of servers.

 

From the fall