Comment enregistrer les données du composant de texte enrichi Bootstrap Wysiwyg dans les compétences mysql

Comment enregistrer les données du composant de texte enrichi Bootstrap Wysiwyg dans les compétences mysql_javascript

WBOY

Libérer： 2016-05-16 09:00:18

original

3247 Les gens l'ont consulté

Bootstrap fournit un composant de texte enrichi appelé wysiwyg, qui est utilisé pour afficher et modifier des données de texte enrichi, mais on ne sait pas comment enregistrer les données modifiées dans la base de données MySQL. De plus, on ne sait pas comment afficher les données de la base de données mysql sur wysiwyg. Pour ces deux problèmes, laissez-moi vous indiquer les solutions !

1. Affichage des effets

Tout d’abord, jetons un coup d’œil à l’effet :

Le texte enrichi contient une image et une liste de chiffres
Nous pouvons voir que les données modifiées sont enregistrées avec succès et l'affichage correspondant après l'enregistrement.

2. Texte enrichi

L'explication du texte enrichi par Du Niang est la suivante :

Rich Text Format (généralement appelé RTF) est un format de document multiplateforme développé par Microsoft. La plupart des logiciels de traitement de texte peuvent lire et enregistrer des documents RTF. RTF est l'abréviation de Rich TextFormat, qui signifie format multi-texte. Il s'agit d'un fichier similaire au format DOC (document Word) et présentant une bonne compatibilité. Il peut être ouvert et modifié à l'aide de « WordPad » dans les « Accessoires » de Windows. RTF est une structure de fichiers très populaire et de nombreux éditeurs de texte la prennent en charge. Les paramètres de format généraux, tels que les paramètres de police et de paragraphe, les paramètres de page et d'autres informations, peuvent être stockés au format RTF, ce qui peut réaliser dans une certaine mesure un accès mutuel entre les fichiers Word et wps.
Si le texte riche ne contient pas d'images, nous pouvons utiliser la méthode de transcodage HTML ordinaire, voir titre 4 ; si le texte riche contient des images, le transcodage HTML ordinaire ne peut pas nous satisfaire et nous devons utiliser jquery.base64.js, voir titre trois. .

En parallèle, regardons la définition des champs mysql :

`description` longtext NOT NULL COMMENT 'Description détaillée du projet',

Le type de champ est longtext (la longueur maximale de LongText est de 4294967295 caractères (2^32-1), bien que je ne sache pas quelle est sa taille).

3. jquery.base64

①, présentez jquery.base64.js

Définissez le codage utf-8 en même temps pour vous assurer que les caractères chinois ne sont pas altérés.

$.base64.utf8encode = true;

②, Soumission d'un formulaire de texte enrichi

var editor = "";

Code clé : convertissez la valeur HTML de l'objet de texte enrichi en base64, puis encapsulez-la dans le formulaire.
Voir les détails ci-dessous (un package complet de formulaire de soumission, reportez-vous au framework dwz) :

/**
 * 带文件上传的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);
  });
}

Copier après la connexion

③、Affichage des données en texte enrichi

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

Décoder le code html enregistré dans la base de données via base64.

④, composant wysiwyg

Concernant le code d'encapsulation du composant wysiwyg, je l'ai téléchargé dans la bibliothèque de codes CSDN pour référence détaillée.

4. Méthodes courantes de transcodage HTML

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;
}

Copier après la connexion

Généralement, les deux méthodes ci-dessus sont utilisées pour encoder et décoder les données HTML, mais vous ne pouvez rien faire pour enregistrer les images.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de comprendre le composant de texte enrichi wysiwyg.