TINYMCE new local image upload function _jquery

Source: Internet
Author: User
So tinymce can display the picture normally. In fact, this feature belongs to the general HTML Rich Text Control basic function. Existing requirements extend the TINYMCE to directly upload local images and then display pictures in the text area.
Realize the idea:
Use Ajax for image upload, this upload method can be more user-friendly implementation of TINYMCE image upload extension,
The specific method can refer to my previous Jquery ajaxsubmit upload picture. Integrate Ajax upload images into TINYMCE,
The main is to modify the TinyMCE directory of Tinymce\jscripts\tiny_mce\plugins Advimage plug-ins.
People who know TINYMCE should know that TINYMCE is similar to FireFox. Developers are able to write plug-ins that fit their needs.
So just slightly modify advimage this plugin can be. We're for advimage.
Directory image.htm new jquery image asynchronous submit code:
Copy Code code as follows:

<script type= "Text/javascript" >
function Ajaxuploadpic () {
if ($ ("#flUpload"). val () = "") {
Alert ("Please select a picture file, and then 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, flupload this input type= "file" needs to be wrapped in a form HTML tag and set for that form.

Method= "POST" enctype= "Multipart/form-data" Action=url properties.
The screenshot of the program is as follows:

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.