👁‍🗨 💳 🥃 MVC वेब एप्लिकेशन के लिए छोटेMCE में सरल छवि डाउनलोडर 📪 ♠️ 🚣

मेरी परियोजना के विकास के लिए "बन्धन" की आवश्यकता है, जो कि इमेज को एम्बेड करने की क्षमता है, जो कि एप्लिकेशन सर्वर पर सीधे छोटे संपादक पर आधारित है, ताकि यह अंतिम उपयोगकर्ता के लिए सहज हो। पूरी तरह से चुप रहना और हमेशा सब कुछ stackoverflow.com पर उपयोगी होना और इस विषय पर आज होने वाली हर चीज का अध्ययन करना, मुझे एहसास हुआ कि मुझे अपनी बाइक को फिर से बनाना होगा। मेरे मुख्य उद्देश्य इस प्रकार थे:
लगभग सभी "तैयार-किए गए" खुले कार्यान्वयन स्टोरेज के फ़ाइल सिद्धांत का उपयोग करते हैं, जब उपयोगकर्ता पहली बार सर्वर में फ़ाइल को स्टोरेज एरिया में अपलोड करता है, और फिर उसे एडिटर में सम्मिलित करता है। परिणाम एक जटिल प्रक्रिया है, और इसके अलावा, एप्लिकेशन सर्वर एक कचरा डंप फ़ाइल बनने का जोखिम उठाता है। दूसरा मकसद यह है कि सभी निर्णय काफी जटिल और कठिन थे। उदाहरण के लिए, उनमें से कुछ ने चांदी के घटकों का उपयोग किया, दूसरों ने बाहरी निर्भरता का एक गुच्छा खींच लिया। सभी के लिए, मेरा लक्ष्य MVC पर चलने वाले SmallMCE के लिए एक सरल, आसान छवि डाउनलोडर लिखना है। (मुझे लगता है कि यह किसी भी एमवीसी इंजन के लिए सही होगा न कि ASP.NET)। इस लेख में मैं आपको बताऊंगा कि कैसे आप अपने बूटलोडर और छोटे-छोटे कार्यों के लिए प्लगइन लिख सकते हैं।

1. बूटलोडर

लोडिंग इंटरफ़ेस के रूप में, मैं एक स्थानीय फ़ाइल और दो बटन के साथ एक पूर्वावलोकन पैनल के चयन के लिए एक बटन के साथ एक संवाद प्राप्त करना चाहूंगा - "डालें" और "रद्द करें"। हम jquery.form का उपयोग करके एसिंक्रोनस डाउनलोड करेंगे। यह एक फ़ाइल का चयन करने के तुरंत बाद स्वचालित हो जाएगा।
सबसे पहले, बूटलोडर नियंत्रक लिखें।

public class ImageController : Controller { public ActionResult Index() { return View(); } [HttpPost] public JsonResult Index(HttpPostedFileBase file) { var service = new ImageService(); byte[] data = new byte[file.ContentLength]; file.InputStream.Read(data, 0, file.ContentLength); var image = service.CreateImage(file.FileName, file.ContentType, data); JsonResult res = Json(new {image.Id}); res.ContentType = "text/html"; //  ,   jquery.form (for iframe implementation) return res; } [OutputCache(Duration = 0)] public ActionResult ById(string id) { var service = new ImageService(); var image = service.GetImage(id); return new FileStreamResult(new MemoryStream(image.Data), image.ContentType); } }

भंडारण के लिए, मैंने सेवा का उपयोग किया। परीक्षण प्रयोजनों के लिए, यह सब कुछ स्थिर हैश में रखता है:

 class ImageService { static Dictionary<string, ImageData> _images = new Dictionary<string, ImageData>(); public ImageData CreateImage(string fileName, string contentType, byte[] data) { var image = new ImageData(fileName, contentType, data); _images.Add(image.Id, image); return image; } public ImageData GetImage(string id) { return _images[id]; } internal class ImageData { private byte[] _data; public string FileName { get; set; } public string ContentType { get; set; } public string Id { get; set; } public byte[] Data { get { return _data; } } public ImageData(string fileName, string contentType, byte[] data) { FileName = fileName; ContentType = contentType; _data = data; Id = Guid.NewGuid().ToString(); } } }

बाद में, आप सभी डेटा को डेटाबेस या डिस्क में ड्राइव कर सकते हैं, जैसा कि आप चाहते हैं।
आइए, एक इंडेक्स बनाएं, हमारे पास एक है।

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="@Url.Content("~/Scripts/tiny_mce/tiny_mce_popup.js")"></script> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script> <style type="text/css"> #image {height: 262px;overflow: auto;width: 440px;} #file { opacity:0;position:relative;z-index: 2;-moz-opacity:0 ; filter:alpha(opacity: 0);width:100%;height:100% } </style> </head> <body> @using (Html.BeginForm("Index", "Image", FormMethod.Post, new { id = "upload", enctype = "multipart/form-data" })) { <div> <div> <fieldset> <legend> </legend> <div id="image"><img id="preview" alt="   " src="" /></div> <input id="file" type="file" name="file" onchange="$('#upload').submit();"/> </fieldset> </div> </div> <div> <input type="button" id="insert" name="insert" value="" /> <input type="button" id="cancel" name="cancel" value="" > </div> } </body> </html>

और स्क्रिप्ट:

 $(document).ready(function () { var options = { dataType: "json", beforeSubmit: function (data) { $('#preview').attr('src', '/Content/images/spinning.gif'); }, success: function (data) { $('#preview').attr('src', '/Image/ById/' + data.Id); } }; //   $('#upload').ajaxForm(options); //       $('#preview').click(function () { $('#file').click(); }); // Auto popup file select dialog //$('#file').click(); });

मूल रूप से यह है, आप हमारे बूटलोडर नियंत्रक का परीक्षण कर सकते हैं।

परिणामस्वरूप, हमारे पास:

2. प्लगिन

अब आप छोटे छोटे के लिए एक प्लगइन बनाने के लिए आगे बढ़ते हैं। उदाहरण कोड से सोर्स कोड कॉपी करें।
मैंने अपनी कल्पनाशीलता प्लगइन का नाम दिया।

editor_plugin.js

 (function() { // Load plugin specific language pack tinymce.PluginManager.requireLangPack('imagelight'); tinymce.create('tinymce.plugins.ImagelightPlugin', { init : function(ed, url) { tinyMCE.activeEditor.execCommand('mceExample'); ed.addCommand('mceImagelight', function() { ed.windowManager.open({ file : '/Image', width : 480, height : 385, inline : 1 }, { plugin_url : url // Plugin absolute URL }); }); ed.addButton('imagelight', { title : 'imagelight.desc', cmd : 'mceImagelight', image : url + '/img/imagelight.png' }); ed.onNodeChange.add(function(ed, cm, n) { cm.setActive('imagelight', n.nodeName == 'IMG'); }); }, getInfo : function() { return { longname : 'Imagelight plugin', author : 'AldeFalco', authorurl : 'http://tinymce.moxiecode.com', infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example', version : "1.0" }; } }); tinymce.PluginManager.add('imagelight', tinymce.plugins.ImagelightPlugin); })();

हम स्क्रिप्ट से सभी कोड को स्थानांतरित करते हैं
js / डायलॉग। js

 tinyMCEPopup.requireLangPack(); var ImagelightDialog = { init: function () { var options = { dataType: "json", beforeSubmit: function (data) { $('#preview').attr('src', '/Content/images/spinning.gif'); }, success: function (data) { $('#preview').attr('src', '/Image/ById/' + data.Id); } }; $('#upload').ajaxForm(options); $('#preview').click(function () { $('#file').click(); }); }, insert : function() { // Insert the contents from the input into the document tinyMCEPopup.editor.execCommand('mceInsertContent', false, $('#image').html()); tinyMCEPopup.close(); } }; tinyMCEPopup.onInit.add(ImagelightDialog.init, ImagelightDialog);

वैसे, यदि आप इसे हस्तांतरित नहीं करते हैं, तो यह काम नहीं करेगा - jquery और smallMCEPopup में प्रारंभिक संघर्ष होता है।

संसाधन फ़ाइलों के लिए, लिखें:

 tinyMCE.addI18n('en.imagelight',{ desc : 'Light Image Uploader' }); tinyMCE.addI18n('en.imagelight_dlg',{ title : 'Upload image', preview : 'Preview', alt : 'Click here to upload an image file', });

हम दृश्य को संशोधित करते हैं।

  <title>{#imagelight_dlg.title}</title> <script type="text/javascript" src="@Url.Content("~/Scripts/tiny_mce/plugins/imagelight/js/dialog.js")"></script> ... <div class="panel_wrapper"> <div id="general_panel" class="panel current"> <fieldset> <legend>{#imagelight_dlg.preview}</legend> <div id="image"><img id="preview" alt="{#imagelight_dlg.alt}" src="" /></div> <input id="file" type="file" name="file" onchange="$('#upload').submit();"/> </fieldset> </div> </div> <div class="mceActionPanel"> <input type="button" id="insert" name="insert" value="{#insert}" onclick="ImagelightDialog.insert();" /> <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" /> </div> }

नतीजतन, हमारे पास काफी सरल और आसान बूटलोडर है। इसमें कुछ घंटे लगे। अंतिम परिणाम:

MVC वेब एप्लिकेशन के लिए छोटेMCE में सरल छवि डाउनलोडर

1. बूटलोडर

2. प्लगिन

More articles: