KindeDitor هو محرر HTML Open Source Open Open Open الذي يدعم تأثيرات تحرير WYSIWYG. إنه مكتوب في JavaScript ويمكنه الاندماج بسلاسة مع أماكن مختلفة متعددة مثل .NET و PHP و ASP و Java ، إلخ.
يوفر KindeDitor نفسه العديد من الإضافات العملية للغاية ، ولأن الكود مفتوح المصدر ، يمكن للمطورين تمديده وتعديله حسب الحاجة.
ضع في اعتبارك هذا السيناريو عند تحرير محتوى موقع الويب باستخدام KindEditor: يميل المحررين إلى نسخ المحتوى من صفحات أخرى أو مستندات Word إلى محرر KindeDitor ، بدلاً من كتابة المحتوى من ورقة فارغة. إذا كان المحتوى المنسق يحتوي على صور ، فأنت بحاجة أولاً إلى تنزيل الصورة من عنوان المصدر إلى المنطقة المحلية وتحميلها على الخادم الذي يوجد فيه هذا الموقع ، وإلا فإن الصورة ستشير إلى الصفحة أو المستند الذي نسخته ، مما سيؤدي إلى فتح الصورة بشكل صحيح في الصفحة. غالبًا ما يتعين على المحررين معالجة الكثير من المستندات ، ومثل هذه العمليات بلا شك مرهقة للغاية. هل يمكن لـ KindeDitor التعرف تلقائيًا على المحتوى الذي تم لصقه فيه وتحميل الصورة إلى الخادم؟ الرمز التالي ينفذ هذه الوظيفة.
للحصول على تفاصيل حول كيفية استخدام KindeDitor على الصفحة ، يمكنك عرض وثائق الموقع الرسمي.
الفكرة الأساسية لتنفيذ هذه الوظيفة: أضف رمزًا إلى حدث Keyup لمحرر KindeDitor للتحقق مما إذا كان المحرر يحتوي على صور ؛ اكتشف الصور التي يجب تحميلها على الخادم تلقائيًا ، اتصل ببرنامج تحميل الصورة من خلال AJAX لتحميل الصور على الخادم ؛ في وظيفة رد الاتصال AJAX ، قم بتغيير عنوان SRC للصورة المقابلة إلى العنوان النسبي المحلي.
لا تدعم هذه الميزة نسخ وتحميل الصور في Word إلى الخادم.
الصورة أعلاه هي النتيجة النهائية. سيتعرف البرنامج تلقائيًا على المحتوى في المحرر. إذا كانت هناك صور تحتاج إلى تحميل ، فسيتم عرض رسالة موجهة في الجزء العلوي من المحرر. عندما ينقر المستخدم على رابط "تحميل" ، سيقوم البرنامج بالاتصال ببرنامج تحميل الصور من خلال طلب AJAX ، وتعديل عنوان SRC للصورة المقابلة إلى العنوان النسبي المحلي في وظيفة رد الاتصال.
خطوات تنفيذ محددة ورموز ذات صلة:
1. تعديل محرر KindeDitor
ابحث عن ملف KindeDitor.js وأضف رمزًا مخصصًا في حدث keyup (). قد يختلف الرمز الذي توفره إصدارات مختلفة من KindeDitor بشكل كبير ويتطلب البحث بمساعدة المستندات الرسمية. تستند هذه المقالة إلى الإصدار 4.1.10 .10.
2. رمز ملف Auto.js
دالة df () {var haspiccontainer = document.getElementById ("has_pic") ؛ إذا كان (has_pic "== null) {haspiccontainer = document.createElement (" div ") ؛ haspiccontainer.id =" has_pic "؛ hascontainer.innerhtml =" <input type = 'text' id = 'piclist' value = '' style: none ؛ ' الخادم </b> <a href = 'javaScript: exploadpic () ؛' > التحميل </a> </div> <div id = 'insired'> </viv> "؛ $ (". ke-toolbar "). بعد (haspiccontainer) ؛} var img = $ (". ke-edit-iframe "). contents (). (that.attr ("src") .indexof ("http: //")> = 0 || $ (IMG). {$ ("#has_pic"). "Get" ، Beordes: text () {$ ("#expload" $ (". ke-edit-iframe"). المحتويات (). العثور على ("img") ؛ that.Attr ("SRC" ،/exploads/" + str [i]) ؛ href = 'javaScript: closeupload () ؛'> إغلاق </a> ") ؛} else $ ("#تأكيد "). النص (" التحميل فشل! ") ؛}}) ؛}$ (". ke-edit-iframe"). يتم استخدام المحتويات (). Find ("IMG") للعثور على جميع الصور في محتوى المحرر. بشكل افتراضي ، يتم تخزين محتوى المحرر في عنصر iframe ، والذي يحتوي على خاصية class = "ke-edit-iframe". سيحدد البرنامج ما إذا كانت قيمة كل سمة صورة SRC تحتوي على "http: //" أو "https: //" ، وبالتالي تحديد ما إذا كانت الصورة هي صورة بعيدة أو صورة محلية. إذا كانت الصورة هي صورة عن بُعد ، فسيتم استدعاء exploadpic.ashx بواسطة طريقة jquery من AJAX لتحميل الخادم. في الوقت نفسه ، قم بتعديل عنوان SRC للصورة المقابلة في وظيفة رد الاتصال.
3. رمز ملف uploadpic.ashx
تحميل الفئة العامة: ihttphandler {public void processRequest (httpcontext context) {context.response.contenttype = "text/plain" ؛ سلسلة الموافقة المسبقة عن علم = context.request.querystring ["pic"] ؛ سلسلة [] arr = pic.split ('|') ؛ سلسلة str = "" ؛ exploadimg st = جديد exploadimg () ؛ لـ (int i = 0 ؛ i <arr.length ؛ i ++) {if (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) if (std.length> 0) {if (i == arr.length - 1) strr += std ؛ آخر strr + = std + "|" ؛ }}} context.Response.write (SSTR) ؛ } bool public isReusable {get {return false ؛ }}} الفئة العامة uploadimg {public string saveurlpics (سلسلة imgurlary ، مسار السلسلة) {String strhtml = "" ؛ string dirpath = httpcontext.current.server.mappath (path) ؛ حاول {if (! dirctory.exists (dirpath)) {directory.createdirectory (dirpath) ؛ } string ymd = dateTime.now.toString ("Yyyymmdd" ، DateTimeFormatinFo.invariantIntInfo) ؛ dirpath + = ymd + "/" ؛ if (! dirctory.exists (dirpath)) {directory.createdirectory (dirpath) ؛ } string newFilename = dateTime.now.toString ("YyyyMmdDhhmmss_ffff" ، dateTimeFormatinfo.invariantIntInfo) + imgurlary.substring (imgurlary.lastindexof (".")) ؛ WebClient wc = new WebClient () ؛ wc.downloadFile (imgurlary ، dirpath + newFilename) ؛ strhtml = ymd + "/" + newFilename ؛ } catch (استثناء ex) {// return ex.message ؛ } إرجاع strhtml ؛ }}يتم تنزيل الصورة عن بُعد على المسار النسبي للخادم "/التحميل/الصورة/" من خلال طريقة الويب ، وسيتم إنشاء أسماء الملفات والملفات المقابلة تلقائيًا وفقًا للتاريخ. تحتوي النتيجة التي تم إرجاعها على العناوين النسبية المحلية لجميع الصور مفصولة "|". في وظيفة التحميل () لملف Auto.js في الخطوة 2 ، تحصل نجاح طريقة رد الاتصال على القيمة وتوصيفها ، ويعين العنوان إلى سمة SRC للصورة المقابلة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.