Bootstrap Rich Text component WYSIWYG data save to MySQL method _javascript tips

Bootstrap provides a rich text component called WYSIWYG to display and edit rich-text data, but it is not known how to save edited data to a MySQL database. In addition, how to display the data in the MySQL database to WYSIWYG is also unknown, for these two issues, let me tell you the solution!

One, the effect shows

First, let's take a look at how it works:

There is a picture in the rich text, and a list of numbers
We can see the edited data saved successfully, and the corresponding display after the save.

Second, Rich Text

The mother of the rich text explanation is as follows:

Rich Text Format (Rich Text format, commonly referred to as RTF) is a cross-platform document format developed by Microsoft Corporation. Most word processing software can read and save RTF documents. RTF is a rich textformat abbreviation, meaning multiple text format. This is a file similar to DOC format (Word document) that is well compatible and can be opened and edited using WordPad in Windows accessories. RTF is a very popular file structure, and many text editors support it. General formatting, such as font and paragraph settings, page Setup, and so on, can exist in Rich Text format, which can achieve a certain degree of mutual visits between Word and WPS files.
If rich text does not contain pictures, we can use the normal HTML transcoding method, see heading four, if the rich text contains pictures, the normal HTML transcoding can not meet us, we need to use jquery.base64.js, see heading three.

So at the same time, let's take a look at the MySQL field definition:

' Description ' longtext not NULL COMMENT ' project detailed description ',

The field type is Longtext (longtext maximum length of 4,294,967,295 characters (2^32-1), although I do not know how big it is.

Third, Jquery.base64

①, introduction of Jquery.base64.js

<script type= "Text/javascript" src= "${ctx}/components/jquery/jquery.base64.js" ></script>

At the same time set Utf-8 code to ensure that Chinese is not garbled.

$.base64.utf8encode = true;

②, Rich Text form submission

var editor = "<input type= ' hidden ' name= '" + $this. attr ("name") + "' value= '"
+ $.BASE64.BTOA ($this. HTML ()) + "'/>";

Key code: Converts the HTML value of a rich text object to Base64, and then encapsulates it in form form.
See detailed below (a form package for the entire form submission, reference and DWZ framework):

/** * with file upload Ajax form submission * * @param {Object} * form * @param {Object} * Callback/function Iframecallback (form,

 Callback) {Yunm.debug ("with File upload processing");

 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 (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 ' Styl"
 E= ' 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: '  

③, Rich Text data display

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

Decodes the HTML code saved in the database by Base64.

④, WYSIWYG components

Regarding the WYSIWYG component encapsulation code, I have uploaded to the CSDN code base for detailed reference.

Four, ordinary HTML transcoding procedure

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

In general, the HTML data is encoded and decoded using the above two methods, but there is nothing to save the image.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to understand the rich text component WYSIWYG help.