Bootstrap bietet eine reichhaltige Textkomponente namens WYSIWYG, mit der reichhaltige Textdaten angezeigt und bearbeitet werden. Es ist jedoch nicht bekannt, wie Sie die bearbeiteten Daten in der MySQL -Datenbank speichern. Darüber hinaus ist nicht bekannt, wie die Daten in der MySQL -Datenbank auf WYSIWYG angezeigt werden. Lassen Sie mich für diese beiden Probleme Ihnen die Lösung sagen!
1. Effektanzeige
Schauen wir uns zunächst an, wie es funktioniert:
Es gibt ein Bild im reichen Text und eine Liste von Zahlen
Wir können sehen, dass die bearbeiteten Daten erfolgreich und die entsprechende Anzeige nach dem Speichern gespeichert werden.
2. Reicher Text
Du Niangs Erklärung von reichen Texten ist wie folgt:
Rich Textformat (allgemein als RTF bezeichnet) ist ein plattformübergreifendes Dokumentformat, das von Microsoft entwickelt wurde. Die meisten Textverarbeitungssoftware können RTF -Dokumente lesen und speichern. RTF ist die Abkürzung von reichem Textformat, was ein Multi-Text-Format bedeutet. Dies ist eine Datei, die dem DOC -Format (Word -Dokument) mit guter Kompatibilität ähnelt. Sie können es mit dem "Word -Pad" in Windows "Zubehör" öffnen und bearbeiten. RTF ist eine sehr beliebte Dateistruktur, und viele Textredakteure unterstützen sie. Allgemeine Formateinstellungen wie Schrift- und Absatzeinstellungen, Seiteneinstellungen usw. können im RTF -Format vorhanden sein, was den gegenseitigen Zugriff zwischen Word- und WPS -Dateien bis zu einem gewissen Grad erkennen kann.
Wenn der reiche Text keine Bilder enthält, können wir die gewöhnliche HTML -Transkodierungsmethode verwenden, siehe Titel 4; Wenn der reiche Text Bilder enthält, kann uns das gewöhnliche HTML -Transcodieren nicht mehr befriedigen, sodass wir jQuery.base64.js verwenden müssen, siehe Titel 3.
Schauen wir uns gleichzeitig die Definition des MySQL -Feldes an:
"Beschreibung" LongText NICHT NULL Kommentar 'Projekt Detaillierte Beschreibung ",
Der Feldtyp ist LongText (Longtext hat eine maximale Länge von 4294967295 Zeichen (2^32-1), obwohl ich nicht weiß, wie groß es ist).
3. JQuery.Base64
①. Vorstellen jQuery.base64.js
<script type = "text/javaScript" src = "$ {ctx} /components/jquery/jquery.base64.js"> </script>
Setzen Sie gleichzeitig die UTF-8-Codierung ein, um sicherzustellen, dass Chinesen nicht verstümmelt sind.
$ .base64.utf8enCode = true;
②, reichen Sie reichhaltiges Textformular ein
var editor = "<Eingabe type = 'Hidden' name = '" + $ this.attr ("name") + "' value = '" "
+ $ .base64.BTOA ($ this.html ()) + "' />";
Schlüsselcode: Konvertieren Sie den HTML -Wert des reichhaltigen Textobjekts in Base64 und in die Formularform.
Weitere Informationen finden Sie im Folgenden (eine vollständige Formulare Formularverkapselung finden Sie im DWZ -Framework):
/** * AJAX -Formular hochgeladen mit Datei * * @param {Object} * Form * @param {Object} * Callback */function IframeCallback (Formular, Callback) {yunm.debug ("Verarbeitung mit Datei hochladen"); var $ form = $ (Form), $ iframe = $ ("#callbackframe"); // Rich Text Editor $ ("Div.Editor", $ form) .each (function () {var $ this = $ (this); var editor = "<Eingabe type = 'Hidden' name = '" + $ this.attr ("name") + "' value = '" + $ .base64.Btoa ($.html () + ")" $ "" $ "$" $ "" $ ". var data = $ form.data ('Bootstrapvalidator'); if (data) {if (! data.isvalid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'über: leer' style = 'display: Keine'> </iframe>") .Andto ("Body"); } if (! form.ajax) {$ form.append ('<input type = "hidden" name = "ajax" value = "1" />'); } form.target = "callbackframe"; _iFramerePonse ($ iframe [0], callback || yunm.ajaxdone);} Funktion _iframerePonse (Iframe, Callback) {var $ iframe = $ (iframe), $ document = $ (Dokument); $ document.trigger ("ajaxstart"); $ iframe.bind ("load", function (Ereignis) {$ iframe.unbind ("last"); "JavaScript: '<html> </html>';") {// für ff, dh return; DOC. // Antwort ist HTML -Dokument oder Klartext Antwort = doc.body.innerHtml;③, reiche Textdatenanzeige
$ ('#editor'). html ($. Base64.atob (Beschreibung, true));
Dekodieren Sie den in der Datenbank gespeicherten HTML -Code über Base64.
④, Wysiwyg -Komponente
In Bezug auf den CODE in WYSIWYG -Komponenten habe ich ihn auf die CSDN -Codebasis hochgeladen, auf die ausführlich verwiesen werden kann.
4. Gewöhnliche HTML -Transkodierungsmethode
Funktion html_encode (str) {var s = ""; if (str.length == 0) return ""; S = Str.Replace (/&/g, ">"); S = S.Replace (/</g, "<"); S = S.Replace (// g, ">"); S = S.Replace (// g, ""); S = S.Replace (// n/g, "<br>"); return s;} Funktion html_decode (str) {var s = ""; if (str.length == 0) return ""; S = Str.Replace (// g, "&"); S = S.Replace (/</g, "<"); S = S.Replace (// g, ">"); S = S.Replace (// g, ""); S = S.Replace (/'/g, "/'"); S = S.Replace (// g, "/" "); S = S.Replace (/<br>/g,"/n "); return s;}Im Allgemeinen werden die beiden oben genannten Methoden verwendet, um die HTML -Daten zu codieren und zu dekodieren, aber es gibt nichts gegen das Bildsparen zu tun.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, die reiche Textkomponente Wysiwyg zu verstehen.