How to insert text or images in an editable div

Recently, someone asked me a question on the internet, inserting text or images in the Editable div. I have never used the web online editor and will not study the source code. Later, this function was also used in an online chat web project. I took a special look at the code. Basically compile... SyntaxHighlighter. all ();

Recently, someone asked me a question on the internet, inserting text or images in the Editable div. I have never used the web online editor and will not study the source code. Later, this function was also used in an online chat web project. I took a special look at the code.
Basically, the editor or online chat web page is unlikely to be used as an input box in textarea, because we may need to insert images or hyperlinks, therefore, it is required to select iframe or div as the input box.
I use div here.
To make the div editable, you must add the contentEditable = "true" attribute.
Then, you can obtain the cursor position (or select the text position) for text or html insertion.
Because Firefox and other standard browsers support the getSelection method, IE9 and above are also supported, but the evil iE6-8 is not supported, so it should be written in two parts of the Code. Because these codes are simple, I will post them first.
[Javascript]
Function insertHTML (html)
{
Var dthis = $ ("# div3") [0]; // a div of the content to be inserted. This statement is not required in the standard browser.
Var sel, range;
If (window. getSelection)
{
// IE9 and non-IE
Sel = window. getSelection ();
If (sel. getRangeAt & sel. rangeCount ){
Range = sel. getRangeAt (0 );
Range. deleteContents ();
Var el = document. createElement ('div ');
El. innerHTML = html;
Var frag = document. createDocumentFragment (), node, lastNode;
While (node = el. firstChild ))
{
LastNode = frag. appendChild (node );
}

Range. insertNode (frag );
If (lastNode ){
Range = range. cloneRange ();
Range. setStartAfter (lastNode );
Range. collapse (true );
Sel. removeAllRanges ();
Sel. addRange (range );
}
}
}
Else if (document. selection & document. selection. type! = 'Control ')
{

$ (Dthis). focus (); // in a non-standard browser, you must first Insert the html div to get the focus.
Ierange = document. selection. createRange (); // obtain the cursor position
Ierange. pasteHTML (html); // insert html at the cursor position. If only text is inserted, fus. text = "..."
$ (Dthis). focus ();

}
}
The above code basically completes inserting the specified html content in the Editable div. The code can be found everywhere in baidu or google, so I will not explain why it is so common)

After execution, it will be found that it is normal in IE or non-standard browsers. It is not normal in Firefox or chrome.

For example, on the following page, I have an indefinite number of divs (which may be generated dynamically by a program). I only need one of the divs to insert html.
[Html]
Other html elements .....
 
 
 
 

  

Other html elements .....

 

 

 

 
On the above page, I only need div3 to support html insertion. The other two are only editable.
 

 

Using the above Code, we will find that if div3 is the last one that loses the focus, everything is normal. If it is not div3 or I click another control or blank space on the page, we will find that the inserted html is not inserted into the desired div3, but is inserted elsewhere.

 

This is not a bug, but a normal phenomenon. getSelection can span many fields, so it cannot be guaranteed that the obtained range must be the div you need.
 

 

Here I declare again that I really don't want to see (even a glance) How the online web editor in China is implemented. I have reviewed du Niang and google and found a solution.

 

 

 

In fact, what we need to solve is one thing. Whenever the elements on the page (including div or any element) Get the focus and lose it, we only need to get the last div3 div with the focus lost, if yes, execute the above Code. If not, add the html to be inserted directly after the div3 content (hardcoded. Don't tell me no)

 

At first, I thought of setting a click event and focus event for div3. When you click in or get the focus, set a variable such as isdiv3 to true, set it to false elsewhere (this method does not actually work. Here I will not explain why it does not work. There are various situations that can lead to a focus, isdiv3 is still not set to true, and an event needs to be set for each html element to make isdiv3 false, which is a terrible thing ).

 

 

 

Here I will release a more general solution that is not easily disturbed.

 

First, write at the top of the page

 

 

The style above tells us that when only the div gets the focus, it will generate a css attribute, that is, the z-index is set to 100, and the css attribute will be lost in any form. You can also set other css attributes. Because div3 also loses focus when we click the button to execute the function (getSelection still exists)

 

 

 

The following idea is clear. Let's write another function.

 

Var lastFocusID = "";
Function getFocus ()
{
Var divlist = document. getElementsByTagName ('div ');
For (var I = 0; I {
Var ta = divlist. item (I );
If (window. getComputedStyle (ta, null). zIndex! = Null & window. getComputedStyle (ta, null). zIndex = 100 ){
If (ta. id & ta. id! = Null)
LastFocusID = ta. id. toString ();
Else
LastFocusID = "";
Break;
}
Else
LastFocusID = "";
}

}
// Add another full screen event
$ (Window). click (function (e)
{
If (window. getSelection)
{
Var getevent = e. srcElement? E. srcElement: e.tar get; // do not tell me what this sentence means

If (getevent. tagName = "INPUT" & getevent. id! = Null & getevent. id = "cmdInsert ")
{
// Indicates the html insertion button.
// The getFocus method is not executed.
}
Else
GetFocus (); // unless you click the button that inserts html, you must execute getFocus to update the div that loses the focus.
}


})

 

 
 
 

 
Then modify the insertHTML method.
Function insertHTML (html)
{
Var dthis = $ ("# div3") [0];
Var sel, range;
If (window. getSelection)
{
If (lastFocusID! = "Div3 ")
{Www.2cto.com
$ ("Nvidiv32.16.html (dthis. innerHTML + html); // indicates that the user may focus on other controls or perform other operations.
Return; // not executed later
 
}
 

 
.......... // Other codes are the same
 
 

 
In this way, contents may be inserted randomly in Firefox or chrome.
 

 
 
Of course, this is just an idea. You are welcome to provide better methods and better performance ideas.