Unser Projekt verwendet Bootstrapvalidator zur Front-End-Überprüfung, aber es gibt einen Ueditor in der Form. Es hat keine Wirkung bei der Verwendung von Bootstrapvalidator. Ändern und ändern Sie es für ein einheitlicher Seitenstil einfach und ändern Sie ihn.
Schauen wir uns zunächst den modifizierten Effekt an
Der obige Ueditor muss an diesen Punkt angepasst werden. Schreiben wir zunächst zuerst die Grundstruktur.
<form style = "padding-top: 15px; width: 100%" id = "defaultForm"> <div> <label id = "labelId" style = "font-weight: normal;"> ueditor test </label> <divid = "divid"> <script id = "ueid" type = "text"> </script> <input type "text style = "Höhe: 0px; Border: 0px; Margin: 0px; Padding: 0px"/> </div> </div> <div> <button type = "subieren" id = "btn_save"> speichern </button> </div> </Form>
Besondere Aufmerksamkeit, ich habe ein Textfeld hinter dem Ueditor hinzugefügt. Der Zweck dieses Textfelds besteht darin, den Inhalt des Ueditors zu speichern. Da Ihr Ueditor Bootstrapvalidator nicht zur Überprüfung verwenden kann, füge ich ein Textfeld hinzu, das zur Überprüfung verwendet werden kann, und verbergen dann die Eingabe mit Style = "Höhe: 0px; Rand: 0px; Rand: 0px; Padding: 0px;" Verfahren. Achten Sie besonders darauf, dass es nicht mit Display versteckt werden kann: Keine, daher wird die Überprüfung zusammen versteckt.
Dann wird es jetzt nicht funktionieren. Fügen Sie jetzt die Überprüfung des Textfeldinhalts hinzu.
$('#defaultForm').bootstrapValidator({ message: 'Verification failed', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'Eingereichte Daten können nicht leer sein', Validatoren: {Notimpty: {// Nicht-leer-Nachricht: 'Die ausgefüllten Daten können nicht leer sein'},}},}}). On ('Success.Form.BV', Funktion (e) {E.PreventDefault (); var $ Form = $ (E.target); Formular $ .post ('Adresse', {Daten: "Daten"}, Funktion (Ergebnis) {alert (Ergebnis);});Versuchen wir es, es funktioniert wirklich nicht, denn unser Ueditor- und versteckter Textinhalt wurde noch nicht synchronisiert und sollte synchronisiert werden, wenn wir den Inhalt im Ueditor eingeben!
Synchronisieren wir also im ContentChange -Ereignis von Ueditor? ?
Es scheint, dass es zunächst kein Problem gibt, aber Sie werden feststellen, dass diese speziellen Symbole wie *&%￥ beim Eingeben das ContentChange -Ereignis nicht auslösen.
Es ist jetzt peinlich, lass es uns weiterhin lösen!
Hier müssen wir zwei Probleme lösen, eines ist das ContentChange-Ereignis, das Problem, dass spezielle Symbole nicht ausgelöst werden können, und das Problem der Zuordnung und Überprüfung.
Schauen Sie sich zunächst das erste Problem an, dass spezielle Symbole nicht ausgelöst werden können. Schauen wir uns zunächst an, wie Ueditor nach dem Erzeugen aussieht.
Hier wurde ein Iframe gefunden. Es scheint, dass der Inhalt des Ueditors hier verborgen ist. Solange Sie das Inhaltsveränderungsereignis darin anhören, sollte das erste Problem gelöst werden.
Es gibt eine weitere zweite Frage. Laden Sie einfach den Code hoch hoch
editor = ue.geteditor ("ueid", {initialFrameHeight: 40}). Ready (function () {var editor = ue.geteditor ("ueid"); /* finde den Iframe von ueditor* / var contents = $ ('#ueid'). find ('iframe'). contents (); var fn = function (); var fn = function (); $ ("#inputID"). Val (ue.geteditor ("ueid"). {//document.all erkennt, ob es unter IE und unter IE Inhalt ist.Nach der Zuordnung müssen wir die Methode für UpdateStatus und Validatefield der Bootstrapvalidator verwenden, um es erneut zu überprüfen, und versuchen Sie es erneut.
Wenn Sie genau hinschauen, gibt es drei Probleme im Inneren. Eines ist, dass der Grenze die Farbe nicht zusammen verändert. Das zweite ist, dass es kein Symbol mit √ und × rechts gibt. Der dritte ist, dass der direkte Punktspar keine Überprüfung auslöst.
Ok, lass es uns nacheinander lösen! Erstens, warum hat sich die Grenze nicht geändert? Eigentlich ist es normal, weil wir ein verstecktes Textfeld überprüfen. Wenn sich die Farbe ändert, sollte es sich um das Textfeld handeln.
OK, dann werden wir ein Stück JS hinzufügen und die Randfarbe mit der linken Etikettfarbe gleich machen. Fügen Sie also nach jeder erneuten Überprüfung des Ueditors ein Stück Code hinzu
$ ($ ('#UEID div') [0]).
Das zweite Problem besteht darin, √ × es anzeigen zu lassen. Dies ist ein bisschen problematisch. Ich habe den Stil Stück für Stück angepasst. Schließlich fand ich eine Lösung. Finden Sie die .edui-Default .edui-editor-Klasse in der Datei ueditor.css und ändern Sie ihre Position in Position: Anfangs; Passen Sie dann den Rand auf die gleiche wie die Symbolleiste in der Ready-Methode des Ueditors ein.
var margintop = $ ($ ('#ueid .edui-editor-toolbarbox') [0]). HAGH ();
$ ($ ('#divid i') [0]). CSS ('Margin-Top', Margintop);
Der letzte wird am besten gelöst. Fügen Sie einfach einen solchen Code hinzu, um die Subjekt zu formulieren
$ ('#defaultForm'). subjekt (function () {$ ('#defaultForm'). Data ('Bootstrapvalidator') .UpDatestatus ('InputName', 'Not_validated', null) .Validatefield ('InputName'); $ ('#labelId'). CSS ('Farbe'));Schließlich können wir den endgültigen Effekt sehen, und wenn wir das Formular einreichen, können wir das Val () des Textfelds direkt nehmen, und wir möchten kein zusätzliches Urteilsvermögen hinzufügen, wenn (es ist Ueditor) {....}. Schließlich ist der gesamte HTML -Inhalt beigefügt
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Scripts/bootstrap.css" rel = "stylesheet" /> <link href = "bootstrapvalidator.min · name = "inputName" style = "Höhe: 0px; Border: 0px; Margin: 0px; Padding: 0px"/> </div> </div> <div> <button type = "subieren" id = "btn_save"> speichern </button src = "jQuery-1.9.1.min.js"> </script> <script src = "scripts/bootstrap.min.js"> </script> <script src = "bootstrapvalidator.min.js"> </script Src = "ueditor.config.js" src = "ueeditor/ueditor.all.min.js"> </script> <script src = "zh_cn.js"> </script> <script src = "ueeditor/Lang/zh-cn/zh-cn.js"> </script> <script type = "text/javascript"> $ (function (function "(function () (function () (function (function (function InitialFrameHeight: 40}). Ready (function () {var editor = ue.geteditor ("ueid"); /*Finden des Iframe von Ueditor* / var margintop = $ ($ ('#Ueid .edui-editor-toolbarbox') [0]). var contents = $ ('#UEID'). Find ('Iframe'). Inhalt (); 'Not_Validated', Null) .ValidateField ('InputName'); Contents.get (0) .AttAchEvent ('Onpropertychange', Funktion (e) {fn ();}); 'Not_validated', null) .ValidateField ('InputName'); 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputName: {// Submitted control name attribute message: 'The submitted data cannot be empty', validators: { notEmpty: { // Non-empty message: 'The filled-in data cannot be empty' },}},}}. }) </script>Denken Sie daran, diejenigen, die Sie verwenden, einige Bootstraps und JQuery hinzuzufügen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.