So speichern Sie Daten der Bootstrap-Rich-Text-Komponente Wysiwyg in mysql_javascript-Kenntnissen

Bootstrap bietet eine Rich-Text-Komponente namens Wysiwyg, die zum Anzeigen und Bearbeiten von Rich-Text-Daten verwendet wird. Wie die bearbeiteten Daten jedoch in der MySQL-Datenbank gespeichert werden, ist unbekannt. Darüber hinaus ist nicht bekannt, wie die Daten in der MySQL-Datenbank in Wysiwyg angezeigt werden sollen. Lassen Sie mich Ihnen die Lösungen für diese beiden Probleme nennen!

1. Effektanzeige

Schauen wir uns zunächst die Wirkung an:

Der Rich-Text enthält ein Bild und eine Liste mit Zahlen
Wir können sehen, dass die bearbeiteten Daten erfolgreich gespeichert wurden und die entsprechende Anzeige nach dem Speichern angezeigt wird.

2. Rich-Text

Du Niangs Erklärung von Rich Text lautet wie folgt:

Rich Text Format (allgemein als RTF bezeichnet) ist ein von Microsoft entwickeltes plattformübergreifendes Dokumentformat. Die meisten Textverarbeitungsprogramme können RTF-Dokumente lesen und speichern. RTF ist die Abkürzung für Rich TextFormat, was Multitextformat bedeutet. Dies ist eine Datei, die dem DOC-Format (Word-Dokument) ähnelt und eine gute Kompatibilität aufweist. Sie kann mit „WordPad“ in Windows „Zubehör“ geöffnet und bearbeitet werden. RTF ist eine sehr beliebte Dateistruktur und wird von vielen Texteditoren unterstützt. Allgemeine Formateinstellungen wie Schriftart- und Absatzeinstellungen, Seiteneinstellungen und andere Informationen können im RTF-Format gespeichert werden, wodurch in gewissem Umfang ein gegenseitiger Zugriff zwischen Word- und WPS-Dateien realisiert werden kann.
Wenn der Rich-Text keine Bilder enthält, können wir die normale HTML-Transkodierungsmethode verwenden, siehe Titel 4; wenn der Rich-Text Bilder enthält, kann uns die normale HTML-Transkodierung nicht zufriedenstellen, und wir müssen jquery.base64.js verwenden, siehe Titel drei .

Werfen wir gleichzeitig einen Blick auf die Definition von MySQL-Feldern:

`Beschreibung` Langtext NICHT NULL KOMMENTAR 'Detaillierte Beschreibung des Projekts',

Der Feldtyp ist Langtext (die maximale Länge von LongText beträgt 4294967295 Zeichen (2^32-1), obwohl ich nicht weiß, wie groß sie ist).

3. jquery.base64

①, Einführung von jquery.base64.js

6de6dada2789c0a2f5c20aed1a95ecff2cacc6d41bbb37262a98f745aa00fbf0

Stellen Sie gleichzeitig die UTF-8-Kodierung ein, um sicherzustellen, dass chinesische Schriftzeichen nicht verstümmelt werden.

$.base64.utf8encode = true;

②, Rich-Text-Formulareinreichung

var editor = "ec9f3e21703258ef13df046ba5131078";

Schlüsselcode: Konvertieren Sie den HTML-Wert des Rich-Text-Objekts in Base64 und kapseln Sie ihn dann in das Formular.
Sehen Sie sich die Details unten an (ein vollständiges Formularpaket für die Formularübermittlung, siehe DWZ-Framework):

/**
 * 带文件上传的ajax表单提交
 * 
 * @param {Object}
 *      form
 * @param {Object}
 *      callback
 */
function iframeCallback(form, callback) {
  YUNM.debug("带文件上传处理");

  var $form = $(form), $iframe = $("#callbackframe");

  // 富文本编辑器
  $("div.editor", $form).each(
      function() {
        var $this = $(this);
        var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='"
            + $.base64.btoa($this.html()) + "' />";
        $form.append(editor);
      });

  var data = $form.data('bootstrapValidator');
  if (data) {
    if (!data.isValid()) {
      return false;
    }
  }

  if ($iframe.size() == 0) {
    $iframe = $("<iframe id='callbackframe' name='callbackframe' src='about:blank' style='display:none'></iframe>")
        .appendTo("body");
  }
  if (!form.ajax) {
    $form.append('<input type="hidden" name="ajax" value="1" />');
  }
  form.target = "callbackframe";

  _iframeResponse($iframe[0], callback || YUNM.ajaxDone);
}
function _iframeResponse(iframe, callback) {
  var $iframe = $(iframe), $document = $(document);

  $document.trigger("ajaxStart");

  $iframe.bind("load", function(event) {
    $iframe.unbind("load");
    $document.trigger("ajaxStop");

    if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For
    // Safari
    iframe.src == "javascript:'<html></html>';") { // For FF, IE
      return;
    }

    var doc = iframe.contentDocument || iframe.document;

    // fixing Opera 9.26,10.00
    if (doc.readyState && doc.readyState != 'complete')
      return;
    // fixing Opera 9.64
    if (doc.body && doc.body.innerHTML == "false")
      return;

    var response;

    if (doc.XMLDocument) {
      // response is a xml document Internet Explorer property
      response = doc.XMLDocument;
    } else if (doc.body) {
      try {
        response = $iframe.contents().find("body").text();
        response = jQuery.parseJSON(response);
      } catch (e) { // response is html document or plain text
        response = doc.body.innerHTML;
      }
    } else {
      // response is a xml document
      response = doc;
    }

    callback(response);
  });
}

③、Rich-Text-Datenanzeige

$('#editor').html($.base64.atob(description, true));

Dekodieren Sie den in der Datenbank gespeicherten HTML-Code über Base64.

④, Wysiwyg-Komponente

Was den Kapselungscode der Wysiwyg-Komponente betrifft, habe ich ihn zur detaillierten Referenz in die CSDN-Codebibliothek hochgeladen.

4. Gängige HTML-Transkodierungsmethoden

function 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(/\'/g, "&#39;");
  s = s.replace(/\"/g, """);
  s = s.replace(/\n/g, "<br>");
  return s;
}

function 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(/&#39;/g, "\'");
  s = s.replace(/"/g, "\"");
  s = s.replace(/<br>/g, "\n");
  return s;
}

Im Allgemeinen werden die beiden oben genannten Methoden zum Kodieren und Dekodieren von HTML-Daten verwendet, Sie können jedoch nichts gegen das Speichern von Bildern tun.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, um die Rich-Text-Komponente Wysiwyg zu verstehen.