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

Source: Internet
Author: User
Tags bind

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.



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




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,

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.