The Wangeditor editor loses focus and can still insert a picture in its original location

This article is to bring you a very good Rich text editor Wangeditor, his biggest feature is that it can be in the ie6,7,8 on the loss of focus can still be inserted in the original location of the picture, and the amount of code is very small, below we will analyze how he achieved it?

Yesterday on the GitHub found a good rich text editor Wangeditor, a look at the name is written by the Chinese. The editor is good at supporting ie6+, and the most important point is that it can still be inserted in the original position after losing focus on the ie6,7,8, with little code. So I was curious to see how it was done, cropped it up, that's all.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

That's a lot less than the one in the last article from the Kindeditor, and it looks like a clear glance.

How do you use it?

?

1 2 3 4 5 6 7 8 9 10 11 12 13-14

function Insertimage (HTML) {restoreselection (); if (document.selection) currentrange.pastehtml (HTML); else Document.execcommand ("Insertimage", false,html); Saveselection (); } avalon.bind ($ (' post_input '), ' MouseUp ', function (e) {saveselection ();}); Avalon.bind ($ (' post_input '), ' KeyUp ', function (e) {saveselection ();});

As in the previous article, you must keyup,mouseup the editor's Div to save the selection,range so that you can still insert the picture in its original position after losing focus. Direct Insertimage (HTML) is available when you call. Here is not the IFRAME, is the Div contenteditable=true.

The example inside the wangeditor is to insert a picture of an outer chain and only one picture at a time. Wangeditor source code is unified with the Document.execcommand ("Insertimage", false,html); But the problem with this approach is that in ie6,7,8, if you want to insert more than one picture, you just insert a picture in the original location.

Just comment out the IF

Insert two pictures at a time

This is a serious point, IE6.

Ie7

Ie8

The solution is if it is ie6,7,8, currentrange.pastehtml (HTML);. Insert HTML, which is to remove the if annotation above. Of course the insert is no longer the picture address, now is the entire IMG tag containing the image address

Ie6

Ie7

Ie8

The last attached example downloads

The above mentioned is the entire content of this article, I hope you can enjoy.

Note : For more wonderful tutorials, please pay attention to the triple graphics tutorial channel,