TinyMCE adds the local image upload function

In this way, TinyMCE can display images normally. In fact, this function is a basic function of the common HTML Rich Text control. Currently, TinyMCE can be expanded to directly upload local images and then display images in the text area.
Implementation ideas:
Use Ajax to upload images. This upload method can be more user-friendly for TinyMCE Image Upload extension,
For details, refer to the previous Jquery ajaxsubmit upload image. Integrate Ajax upload images into TinyMCE,
Modify the advimage plug-in of TinyMCE \ jscripts \ tiny_mce \ plugins under the tinymce directory.
People who know TinyMCE should know that TinyMCE is similar to FireFox. Developers can compile plug-ins suitable for their own needs.
Therefore, you only need to slightly modify the advimage plug-in. For advimage
The following code asynchronously submits jquery images added to image.htm in the directory:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function AjaxUploadPic (){
If ($ ("# flUpload"). val () = ""){
Alert ("select an image file and Click Upload. ");
Return;
}
$ ('# MyForm'). ajaxSubmit ({
BeforeSubmit: function (){
},
Success: function (html, status ){
Var result = html. replace ("<PRE> ","");
Result = result. replace ("</PRE> ","");
If (html. indexOf ("format")> 0 ){
Alert (result );
Return;
}
$ ("# Src"). val (result );
ImageDialog. showPreviewImage ($ ("# src"). val ())
}
});
}
});
</Script>

Of course, the flUpload input type = "file" must be wrapped by the form html Tag and set for the form.

Method = "post" enctype = "multipart/form-data" action = url property.
The procedure is as follows: