Extended extjs Editor (htmleditor): insert an image

EXT's built-in editor functions are relatively weak, such as inserting images and file management. I am a lazy (believe mostProgramThe official extjs forum is so powerful that it is basically responsive,CommunityThe atmosphere is very good. It seems that ext has a dedicated team to reply to questions from the community.
In short, I found a post that expanded the htmleditor image insertion function.CodeThere are a lot of problems. I have made some changes and it is normal. Currently, it is just simple to insert URL images. Later I will expand a fully functional plugin, including managing uploaded files, file management and so on, but this is the end. below is the code and usage.

 

Ext. namespace ('ext. UX ', 'ext. UX. INS ins'); Ext. UX. plugins. htmleditorimageinsert = Function (Config) {Config = config | |{}; Ext. Apply ( This , Config ); This . Init = Function (Htmleditor ){This . Editor = htmleditor; This . Editor. On ('render', onrender, This );}; This . Imageinsertconfig = {poptitle: config. poptitle | 'image url', popmsg: config. popmsg | 'Please select the URL of the image you want to insert: ', popwidth: config. popwidth | 350, popvalue: config. popvalue | ''} This . Imageinsert = Function (){ VaR Range; If (Ext. isie) range = This .Editor.doc. selection. createRange (); VaR MSG = ext. MessageBox. Show ({Title: This . Imageinsertconfig. poptitle, MSG: This . Imageinsertconfig. popmsg, width: This . Imageinsertconfig. popwidth, buttons: Ext. MessageBox. okcancel, Prompt : True , Value: This . Imageinsertconfig. popvalue, scope: This , FN: Function (BTN, text ){ If (BTN = 'OK '){ If (Ext. isie) range. Select (); This . Editor. relaycmd ('insertimage', text );}}}); VaR Win = msg. getdialog () win. Show. Defer (200, Win )} Function Onrender (){ If (! Ext. issafari ){ This . Editor. TB. Add ({Itemid: 'htmleditorimage', CLS: 'x-BTN-Icon X-edit-insertimage', enabletoggle: False , Scope:This , Handler: Function (){ This . Imageinsert () ;}, clickevent: 'mouseunder', tooltip: config. buttontip | {Title: 'insert image', text: 'insert image to editor', CLS: 'x-HTML-Editor-tip '}, tabindex: -1 });}}}

 
Usage:
 

<SCRIPT type ="Text/JavaScript"> Ext. onready (Function() {Ext. quicktips. INIT ();NewExt. formpanel ({renderto: 'form', defaulttype: 'textfield', items: [{xtype: 'htmleditor ', fieldlabel: 'Some label', width: 650, height: 350, plugins:NewExt. UX. plugins. htmleditorimageinsert ({poptitle: 'image URL? ', Popmsg: 'Please insert an image URL...', popwidth: 400, popvalue: 'http:// Www. Google. gr/Intl/en_com/images/logo_plain.png'})}]}) ;}); </SCRIPT>