في الآونة الأخيرة ، نظرًا لمتطلبات المشروع ، هناك حاجة إلى مربع تحرير نص في الواجهة الأمامية ، مع وظيفة التحميل في الوقت الفعلي للصور. لقد قارنت العديد من المكونات الإضافية عبر الإنترنت. أولاً ، كان Baidu's Ueitor ووجد أن الإطار كان كبيرًا جدًا. لم يكن ما أردت معرفة ما إذا كان إطار عمل صغير قد قدم العديد من الملفات ؛ ثانياً ، كان jquery's easyui. على الرغم من أن الإصدار الشخصي مجاني ، إلا أن المشروع ينتمي إلى أعمال الشركة ، ويبدو أنه ليس من المناسب استخدام الإصدار التجاري من الإطار. بالنظر إلى أن الواجهة الأمامية للمشروع مبنية بشكل أساسي على bootstrap ، تم اختيار المكون الإضافي في bootstrap-wysiwyg أخيرًا ، وهو بسيط للغاية وخفيف الوزن وقابل للتمديد للغاية.
من المريح للغاية تقديم bootstrap-wysiwyg وتطبيق وظيفة تحرير النص ، لكنني لاحظت أن تحميل الصورة يتم تنفيذها باستخدام FileEpi. بالنسبة لمعظم مواقع الويب ، على الرغم من أن تجربة المستخدم بدون تحميل جيدة جدًا مع Fileapi ، عندما يتم تخزينها فعليًا في قاعدة البيانات ، فإننا لا نزال نأمل في تخزين المسار الثابت للصورة على الخادم بدلاً من الصور المترتبة. باختصار ، نحتاج إلى إجراء عملية إعادة كتابة صغيرة من bootstrap-wysiwyg (يشار إليها فيما يلي باسم WY).
أولاً ، دعونا نلاحظ عناصر التحكم في الصورة على الصفحة. تخطي عناصر التحكم الأخرى وتحقق من رمز المصدر. من السهل العثور على الكود التالي:
<div> <a id = "picturebtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-arget = "#picturebtn" data-edit = "insertimage"/> </viv>
لنقدم تفسيرًا. خصائص دور البيانات وخصائص استهداف البيانات هي أحداث محددة مسبقًا في bootstrap. هنا يمكننا أن نفهمها على أنها متعلقة بالتخطيط ، دون النظر فيها. النقطة الرئيسية هنا. تحرير البيانات الثالثة ، لا يوجد مثل هذا الحدث في bootstrap. مراقبة bootstrap-wysiwyg.js ، يمكنك العثور على بعض الرموز مثل هذا:
شريط الأدوات.
بمعنى آخر ، يتم تنفيذ هذه الخاصية فعليًا لتسهيل المختارين ، وهو ما يعادل إضافة حدث مستمع إلى زر الصورة.
دعنا نستمر في دراسة تنفيذ معاينة صورة WY. الخطوة الأولى هي ، كما هو موضح في الكود أعلاه ، يستمع المستمع إلى حدث تغيير FileInput ، ويستجيب ، ويستدعي وظيفة insertfiles
reporteselection () ؛ if (this.type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files) ؛} saveSelection () ؛ His.value = '' ؛العثور على وظيفة إدراج
insertfiles = function (files) {editor.focus () ؛ دولار. Options.FilePloaderror ("قارئ الملف" ، هـ) ؛ }لقد لاحظنا أنه يستخدم طريقة $ .deferred () لـ jQuery ، والتي تسمى أولاً طريقة readfileIntodataurl ، ثم تقوم بنجاح بإخراج الصورة إلى مربع النص من خلال طريقة execcommand التي يتم الكفار إليها ذاتيًا. هذه الصورة هي في الواقع علامة <img> ، ولكن سمة SRC هي صورة تمثلها سلسلة. لذا فإن ما يتعين علينا القيام به هو تحميل الملف فعليًا بعد تشغيل المستمع ، والحصول على SRC للصورة ، ثم تسليم الرابط إلى طريقة execcommand اللاحقة.
نظرًا لأن المؤلف ليس على دراية بالمؤلف ، فهو لا يزال يستخدم وضع رد الاتصال الأكثر شيوعًا
مراقبة طريقة استدعاء AjaxfileUpload:
$ .ajaxfileupload ({url: ... ، secureurl: false ، fileElementId: ... ، datatype: "json" ، success: function (obj) {...} ، error: function () {...}}) ؛هناك اثنين من الخصائص المطلوبة ، url و fileElementId. للحفاظ على صحة التبعية ، لا يُنصح بإعادة كتابة Ajaxfileupload. ومع ذلك ، نظرًا لأن مستمع WY يتم تنفيذه من قبل المستمع ، فمن غير الواقعي تمرير المعلمات من خلال الوظائف ، لذلك نحن بحاجة إلى تحديد بعض الخصائص لمربع الإدخال بأنفسنا لتحقيق هدفنا.
أضف بعض الخصائص في FileInput
<type type = "file" id = "pictionInput" name = "picture" data-role = "magic-overlay" data-target = "#picturebtn" data-edit = "insertimage" action = "..." />
يتم استخدام المعرف كملف FileElementId ، وسمات الاسم ضرورية أيضًا ، وخاصةً لاختيار قيمة الخلفية ، الإجراء هو عنوان URL الذي يجب تقديم الصورة إليه.
تحديد وظيفة في bootstrap-wysiwyg.js المسمى uploadFileToServer ، فإن تنسيق الوظيفة هو كما يلي:
var uploadFileToServer = function (id ، action ، callback) {$ .ajaxFileUpload ({url: action ، secureurl: false ، fileelementid: id ، datatype: 'json' ، success: function (obj) {if (obj.status) Options.FilePloaderror ("استئصال الخادم الداخلي" ، OBJ.Message) ؛أعد كتابة طريقة insertfiles على النحو التالي:
insertFiles = function (files ، id ، action) {editor.focus () ؛ $ .each (الملفات ، الدالة (idx ، fileInfo) {if (/^Image////.test(fileinfo.type)) {/ * * $. when (readFileIntOdataurl (fileInfo)). Options.FilePloaderror ("قارئ الملف" ،}) ؛في الوقت نفسه ، قم بإجراء بعض التعديلات على المستمع للحصول على السمات اللازمة
شريط الأدوات. } saveSelection () ؛
بشكل رئيسي ، تمت إضافة وضعين للمعلمة.
وبهذه الطريقة ، اكتملت إعادة الكتابة. لاحظ أنه للتأكد من تنفيذ التنفيذ الصحيح ، يرجى الرجوع إلى ajaxfileupload.js قبل التحكم.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.