Ueditor (1.4.3.2) Extract single image upload function

Referring to the popular method of extracting single-image uploads on the network and modifying them, mainly by creating a JS file (custom.js) that extracts the generic upload image and simply modifying the Ueditor ueditor.all.js file.

1) Add a method to the custom JS Custom.js

var _editor = ue.geteditor (' editor_img ', {toolbars: [[' Simpleupload ']}); _editor.ready (function () {//settings editor not available//_e Ditor.setdisabled (); This place must be careful to block/hide the editor, because this editor instance is not used, so hide//_editor.hide (); Listen image upload _editor.addlistener (' Contentchange ', function (editor) {//Get the contents of the editor (HTML code) var img = ue.geted Itor (' editor_img '). Getplaintxt (); if (Img.replace (/[\r\n]/g, "") = "") {//Determines whether a single picture is uploaded, if only son does not do any processing, wait for the callback function to call again. if (Img.indexof ("loadingclass") = =-1) {//empties the contents of the editor so that the next time you add a picture. Ue.geteditor (' editor_img '). ExecCommand (' Cleardoc '); Call callbackimg to get the picture name if (typeof callbackimg = = = "function") {eval ("callbackimg ('" + $ (IMG). attr ("src") + "')"; } } } });});/ /Only son image to start uploading, show wait. function preuploadsingleimg () {if ($ ("#loading"). Length > 0) {$ ("#loading"). HTML (" "); }}//only son the image callback, then cleans up the content, automatically calls the Contentchange event when the content is cleaned, and then gets the file name of the uploaded file. function Uploadsingleimgcallback () {ue.geteditor (' editor_img '). ExecCommand (' Cleardoc ');} Returns the image Address function callbackimg (IMGSRC) {$ ("#loading") after the upload is complete. html (' ');} Upload Click event function uploadimg () {var file = $ ("iframe"). Get (0). contentwindow.document). Find ("input"). Get (0); File.onchange = function () {}; Determine if the browser is IE if (document.all) {File.Click (); } else {var evt = document.createevent ("mouseevents"); Evt.initevent ("Click", True, true); File.dispatchevent (EVT); }}

2) Modify the Ueditor.all.js source code, find the upload start and upload completed events, in 24466 lines and 24488 lines, respectively, call the JS method Preuploadsingleimg () and Uploadsingleimgcallback ().

if (typeof preuploadsingleimg = = = "function") {preuploadsingleimg ();} function callback () {try{var link, json, loader, BODY = (Iframe.contentdocument | | iframe.contentWindow.doc ument). Body, result = Body.innertext | | body.textcontent | | ‘‘; JSON = (new Function ("return" + result)); link = me.options.imageUrlPrefix + json.url; if (json.state = = ' SUCCESS ' && json.url) {loader = Me.document.getElementById (Loadingid); Loader.setattribute (' src ', link); Loader.setattribute (' _src ', link); Loader.setattribute (' title ', Json.title | | | ‘‘); Loader.setattribute (' Alt ', json.original | | ‘‘); Loader.removeattribute (' id '); Domutils.removeclasses (loader, ' loadingclass '); } else {Showerrorloader && showerrorloader (json.state); }//Extract the upload callback function separately. if (typeof uploadsingleimgcallback = = = ' function ') {uploadsingleimgcallback (); } }catch (er) {showerrorloader && showerrorloader (Me.getlang (' simpleupload.loaderror ')); } form.reset (); domutils.un (IFRAME, ' Load ', callback);}

3) front page code.

Upload Avatar Example: <br><div id= "editor_img" style= "Display:none;" ></div><div id= "Loading" style= "height:100px;width:100px;cursor:pointer;float:left;border:1px solid # 000;text-align:center; "onclick=" uploadimg () "></div><script type=" Text/javascript "src="./lib/ueditor /custom.js "></script>

Ueditor (1.4.3.2) Extract single image upload function