Bootstrap fournit un composant de texte riche appelé Wysiwyg, qui est utilisé pour afficher et modifier des données de texte riches, mais on ne sait pas comment enregistrer les données édité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 vers WYSIWYG. Pour ces deux problèmes, permettez-moi de vous dire la solution!
1. Affichage d'effet
Tout d'abord, jetons un coup d'œil à comment cela fonctionne:
Il y a une image dans le texte riche et une liste de nombres
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 riche
L'explication de Du Niang des textes riches 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, ce qui signifie le format multi-texte. Il s'agit d'un fichier similaire au format DOC (document Word) avec une bonne compatibilité. Vous pouvez l'ouvrir et le modifier à l'aide du "Pad Word" dans Windows "Accessoires". RTF est une structure de fichiers très populaire et de nombreux éditeurs de texte le prennent en charge. Les paramètres de format général, tels que les paramètres de police et de paragraphe, les paramètres de page, etc., peuvent tous exister au format RTF, qui peut réaliser un accès mutuel entre les fichiers Word et WPS dans une certaine mesure.
Si le texte riche ne contient pas d'images, nous pouvons utiliser la méthode de transcodage HTML ordinaire, voir le titre 4; Si le texte riche contient des images, le transcodage HTML ordinaire ne peut plus nous satisfaire, nous devons donc utiliser jQuery.base64.js, voir le titre 3.
Ensuite, en même temps, jetons un coup d'œil à la définition du champ MySQL:
«Description« LongText Not Null Commentaire »Projet DÉSESTRIE DÉTAILLE»,
Le type de champ est LongText (LongText a une longueur maximale de 4294967295 caractères (2 ^ 32-1), bien que je ne sache pas à quel point il est grand).
3. JQuery.base64
①. Introduire jQuery.base64.js
<script type = "text / javascript" src = "$ {ctx} /components/jquery/jquery.base64.js"> </ script>
Dans le même temps, définissez le codage UTF-8 pour s'assurer que le chinois n'est pas brouillé.
$ .Base64.Utf8Encode = true;
②, soumettre un formulaire de texte riche
var editor = "<input type = 'Hidden' name = '" + $ this.attr ("name") + "' value = '"
+ $ .base64.btoa ($ this.html ()) + "'/>";
Code clé: convertissez la valeur HTML de l'objet texte riche en base64, puis encapsulez-le en formulaire de forme.
Voir ce qui suit pour plus de détails (un formulaire de formulaire entier soumis, reportez-vous au cadre DWZ):
/ ** * formulaire ajax téléchargé avec un fichier * * @param {objet} * formulaire * @param {objet} * callback * / function iframecallback (formulaire, callback) {yunm.debug ("upload Processing with File"); var $ form = $ (form), $ iframe = $ ("# callbackframe"); // Rich Text Editor $ ("div.editor", $ form) .each (function () {var $ this = $ (this); var editor = "<input type = 'Hidden' name = '" + $ this.attr ("name") + "' value = '" + $ .base64.btoa ($ this.html ()) + "' />"; $ Form.Append (éditor);}); var data = $ form.data ('bootstrapvalidator'); if (data) {if (! data.isvalid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackFrame' name = 'callbackFrame' src = 'about: blanc' style = 'affiche: non'> </ iframe>"). } if (! form.ajax) {$ form.append ('<input type = "Hidden" name = "ajax" value = "1" />'); } form.target = "callbackframe"; _iframeResponse ($ iframe [0], callback || yunm.ajaxdone);} fonction _iframeResponse (iframe, callback) {var $ iframe = $ (iframe), $ document = $ (document); $ document.trigger ("ajaxstart"); $ iframe.bind ("charger", fonction (événement) {$ iframe.unbind ("charger"); $ document.trigger ("ajaxstop"); if (iframe.src == "javascrip "JavaScript: '<html> </ html>';") {// pour ff, c'est-à-dire doc.body.innerhtml == "false") RETOUR; // La réponse est un document HTML ou un texte brut = doc.body.innerhtml;}} else {// La réponse est une réponse de document XML = DOC;} (Response);③, affichage de données de texte riche
$ ('# editor'). html ($. Base64.atob (Description, true));
Décodez le code HTML enregistré dans la base de données via Base64.
④, composant Wysiwyg
En ce qui concerne le code d'encapsulation du composant WYSIWYG, je l'ai téléchargé sur la base de code CSDN, qui peut être référencée en détail.
4. Méthode de transcodage HTML ordinaire
fonction 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;} fonction 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 "); retour s;}D'une manière générale, les deux méthodes ci-dessus sont utilisées pour coder et décoder les données HTML, mais il n'y a rien à faire pour l'enregistrement de l'image.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article. J'espère qu'il sera utile pour tout le monde de comprendre le riche composant de texte Wysiwyg.