How WYSIWYG Rich Text data is saved to MySQL

Bootstrap provides a rich text component called WYSIWYG, which is used to display and edit rich text data, but how to save the edited data to the MySQL database is unclear. 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!

First, the effect shows

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

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

Second, Rich Text

The mother of the rich text interpretation 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 the abbreviation for rich TextFormat, meaning that it is a multi-text format. This is a DOC format (Word document) file that has good compatibility 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 settings, and so on can be found in rich Text format, it can be implemented to some extent between Word and WPS file Exchange.

If the rich text does not contain pictures, we can use the normal HTML transcoding method, see heading four; if rich text contains pictures, ordinary HTML transcoding has not satisfied us, we need to use the Jquery.base64.js, see heading three.

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

`description` longtext NOT NULL COMMENT ‘项目详细描述‘,

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

Iii. 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 encoding, to ensure that Chinese is not garbled.

true;

②, Rich Text form submission

var"<input type=‘hidden‘ name=‘" + $this.attr("name""‘ value=‘"                        + $.base64.btoa($this"‘ />";

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

/** * Submit an AJAX form with file upload * * @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);varEditor ="<input type= ' hidden ' name= '"+ $ This. attr ("Name") +"' value= '"+ $.base64.btoa ($ This. HTML ()) +"'/>";            $form. Append (editor); });vardata = $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        //SafariIFRAME.SRC = ="javascript: ' ) {//For FF, IE            return; }varDoc = 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;varResponseif(Doc. XMLDocument) {//response is a XML document Internet Explorer PropertyResponse = 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 textResponse = Doc.body.innerHTML; }        }Else{//response is a XML documentResponse = doc;    } callback (response); });}

③, Rich Text data display

$(‘#editor‘true));

The HTML code saved in the database is decoded by Base64.

④, WYSIWYG components

For the WYSIWYG component encapsulation code, I have uploaded to the CSDN code base, which can be referenced in detail.

Iv. Common HTML transcoding practices

 function html_encode(str) {    vars ="";if(Str.length = =0)return ""; s = str.replace (/&/g,"&gt;"); s = S.replace (/</g,"&lt;"); s = S.replace (/>/g,"&gt;"); s = S.replace (//g,"&nbsp;"); s = S.replace (/\ '/g,"& #39;"); s = S.replace (/\ "/g,"&quot;"); s = S.replace (/\n/g,"<br>");returns;} function html_decode(str) {    vars ="";if(Str.length = =0)return ""; s = str.replace (/&gt;/g,"&"); s = S.replace (/&lt;/g,"<"); s = S.replace (/&gt;/g,">"); s = S.replace (/&nbsp;/g," "); s = S.replace (/& #39;/g,"\ '"); s = S.replace (/&quot;/g,"\""); s = S.replace (/<br>/g,"\ n");returns;}

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

Laughter to the reality of helplessness, can not back when, no longer 徨, always to the road has always been in--Eason Chan "Lu has been in"
This article is from: "Silent Wang er Blog"

How WYSIWYG Rich Text data is saved to MySQL