يستخدم مشروعنا bootstrapvalidator للتحقق من الواجهة الأمامية ، ولكن هناك ueditor في النموذج. ليس له أي تأثير عند استخدام bootstrapvalidator. من أجل نمط الصفحة الموحدة ، ما عليك سوى تعديله وتعديله.
أولاً ، دعونا نلقي نظرة على التأثير المعدل
يجب تعديل Ueditor أعلاه إلى هذه النقطة. أولاً ، دعنا نكتب الهيكل الأساسي أولاً.
<النموذج النمط = "padding-top: 15px ؛ العرض: 100 ٪" id = "defaultform"> <viv> <label id = "labelid" style = "font-weight: normal ؛"> ueditor test </billy> <div id = "divid"> <script id = "ueid" type = "plain" style = "الارتفاع: 0px ؛ الحدود: 0px ؛ الهامش: 0px ؛ حشوة: 0px"/> </viv> </viv> <viv> <button type = "submit" id = "btn_save"
إيلاء اهتمام خاص ، لقد أضفت مربع نص خلف Ueditor. الغرض من مربع النص هذا هو تخزين محتوى ueditor. نظرًا لأن ueditor لا يمكنه استخدام bootstrapvalidator للتحقق ، سأضيف مربع نص يمكن استخدامه للتحقق ، ثم إخفاء الإدخال باستخدام النمط = "الارتفاع: 0px ؛ الحدود: 0px ؛ الهامش: 0px ؛ حشوة: 0px ؛" طريقة. إيلاء اهتمام خاص أنه لا يمكن إخفاؤه بالعرض: لا شيء ، لذلك سيتم إخفاء التحقق معًا.
ثم لن يعمل الآن. دعنا نضيف التحقق من محتوى مربع النص الآن.
$ ('#defaultform'). bootstrapvalidator ({message: 'faility faility' ، feedbackons: {appall لا يمكن أن تكون البيانات فارغة "، مصادقات: {notempty: {// رسالة غير فارغة:" لا يمكن أن تكون البيانات المملوءة فارغة '} ،} ،}}). على (' success.form.bv '، function (e) { $ .post ('address' ، {data: "data"} ، function (result) {alert (result) ؛}) ؛دعنا نجرب ذلك ، إنه لا يعمل حقًا ، لأن محتوى ueditor ومحتوى النص المخفي لم يتم مزامنته بعد ، ويجب مزامنته عندما ندخل المحتوى في Ueditor!
فهل نزامن في حدث محتوى ueditor؟ ؟
يبدو أنه لا توجد مشكلة في البداية ، لكنك ستجد أن هذه الرموز الخاصة مثل *& ٪ ￥ لن تؤدي إلى حدوث حدث محتوى عند الإدخال.
إنه أمر محرج الآن ، دعنا نستمر في حلها!
هنا نحتاج إلى حل مشكلتين ، إحداها هي حدث ContentChange ، والمشكلة التي لا يمكن تشغيل الرموز الخاصة ، ومشكلة المهمة وإعادة التسجيل.
أولاً ، انظر إلى المشكلة الأولى التي لا يمكن تشغيل الرموز الخاصة. دعونا نلقي نظرة أولاً على ما يبدو عليه Ueditor بعد توليده.
تم العثور على iframe هنا. يبدو أن محتوى Ueditor مخفي هنا. طالما أنك تستمع إلى المحتوى يغير الأحداث فيه ، يجب حل المشكلة الأولى.
هناك سؤال آخر آخر ، فقط قم بتحميل الرمز
editor = ue.geteditor ("ueid" ، {initialframeheight: 40}). جاهز (function () {var editor = ue.geteditor ("ueid") ؛ /* ابحث عن iframe of ueditor* / var contents = $ ('#ueid'). $ ("#inputId"). val (ue.geteditor ("ueid"). {//document.all يدرك ما إذا كان ذلك صحيحًا تحت IE وتحت محتويات IE.بعد المهمة ، يجب أن نستخدم طريقة updatestatus و validatefield من bootstrapvalidator لإعادة تحديدها ، ثم لنحاول مرة أخرى.
إذا نظرت عن كثب ، فهناك ثلاث مشاكل في الداخل. الأول هو أن الحدود لا تتغير لونها معًا. والثاني هو أنه لا يوجد أيقونة مع √ و × على اليمين. والثالث هو أن النقطة المباشرة لا تؤدي إلى التحقق.
حسنًا ، دعنا نحلها واحدة تلو الأخرى! أولاً ، لماذا لم تغير الحدود لونها؟ في الواقع ، إنه أمر طبيعي ، لأننا نتحقق من مربع نص مخفي. إذا تغير اللون ، فيجب أن يكون مربع النص.
حسنًا ، سنضيف قطعة من JS ونجعل اللون الحدودي نفس لون الملصقات اليسرى ، لذا أضف قطعة من الكود بعد كل إعادة توحيد Ueditor
$ ($ ('#ueid div') [0]). css ('border-color' ، $ ('#labelId').
المشكلة الثانية هي السماح √ × بعرضه. هذا مزعج بعض الشيء. لقد قمت بتعديل النمط قليلاً. أخيرًا ، وجدت حلاً. ابحث عن فئة .edui-default .edui-editor في ملف ueditor.css وقم بتغيير موقعه إلى الموضع: الأولي ؛ ثم اضبط الهامش على نفس الشريط في الطريقة الجاهزة لـ Ueditor.
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). الارتفاع () ؛
$ ($ ('#divid i') [0]). css ('margin-top' ، margintop) ؛
من الأفضل حلها ، فقط أضف مثل هذا الرمز لتشكيل إرسال
$ ('#defaultform'). إرسال (function () {$ ('#defaultform'). البيانات ('bootstrapvalidator') .updatestatus ('inputName' ، 'not_validated' ، null) .validatefield ('inputName') ؛ $ ($ ('ueid div') [0]). $ (#labelid '). css (' color ') ؛أخيرًا ، يمكننا أن نرى التأثير النهائي ، وعندما نرسل النموذج ، يمكننا أن نأخذ Val () مباشرة من مربع النص ، ولا نريد إضافة حكم إضافي إذا كان (إنه ueditor) {....}. أخيرًا ، يتم إرفاق محتوى HTML بالكامل
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ href = "scripts /bootstrap.css" rel = "stylesheet" /> <link href = "bootstrapvalidator.min.css" rel = "STYLESHEET" /> <style>. } </style> </head> <body> <form style = "padding-top: 15px ؛ width: 100 ٪" id = "defaultform"> <viv> <label id = "labelid" style = "font-weight: normal ؛ name = "inputName" style = "الارتفاع: 0px ؛ الحدود: 0px ؛ الهامش: 0px ؛ padding: 0px"/> </div> </div> <viv> <button type = "submit" id = "btn_save"> حفظ </button> </form> </body> </html> <script src = "jquery-1.9.1.min.js"> </script> <script src = "scripts/botstrap.min.js"> </script> <script src = "bootstrapvalidator.min.js src = "ueeditor/ueditor.all.min.js"> </script> <script src = "zh_cn.js"> </script> <script src = "ueeditor/lang/zh-cn/zh-cn.js ue.geteditor ("ueid" ، {initialframeheight: 40}). جاهز (function () {var editor = ue.geteditor ("ueid") ؛ /*العثور على iframe of ueditor* / var margintop = $ ($ (#ueid .edui-ededitorbox ') [0]). I ') [0]). $ (#defaultform). البيانات (bootstrapvalidator ') if (all) {//document.all يدرك ما إذا كان ذلك صحيحًا تحت IE. $ (#defaultform). البيانات (bootstrapvalidator " $ ('#defaultform'). bootstrapvalidator ({message: 'faility faility' ، feedbackons: {appal: 'glyphicon glyphicon-ook' ، invalid: 'glyphicon glyphicon: {the the the the the the the conment conmert. لا يمكن أن تكون البيانات المقدمة فارغة "، مصادقات: {notempty: {// رسالة غير فارغة:" لا يمكن أن تكون بيانات التعبئة فارغة '،}} ،}}). دولارتذكر أن تضيف بعض bootstraps و jQuery إلى تلك التي تستخدمها.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.