The Bootstrap Rich Text Component wysiwyg is used to save data to mysql.

The Bootstrap Rich Text Component wysiwyg is used to save data to mysql.

Bootstrap provides a rich text component called wysiwyg to display and edit rich text data. However, it is not clear how to save the edited data to the MySQL database. In addition, it is not clear how to display data in the mysql database to wysiwyg. For these two problems, let me tell you the solution!

I. effect display

First, let's take a look at the effect:

In rich text, there is an image and a list of numbers.
We can see that the edited data is successfully saved and displayed after being saved.

Ii. Rich Text

Du Niang's explanation of rich text is as follows:

Rich Text Format (RTF) is a cross-platform document Format developed by Microsoft. Most text processing software can read and save the RTF document. Rich TextFormat stands for Rich TextFormat, meaning multi-text format. This is a file similar to the DOC format (Word Document). It has good compatibility and can be opened and edited using the "WordPad" in Windows "attachments. RTF is a very popular file structure, which is supported by many text editors. General format settings, such as font, paragraph settings, page settings, and other information can all be stored in the RTF format, which can achieve mutual access between word and wps files to a certain extent.
If rich text does not contain images, we can use common html transcoding methods. For details, see heading 4. If rich text contains images, normal html transcoding cannot meet our needs, jquery is needed. base64.js, see Title 3.

At the same time, let's take a look at the definition of the mysql field:

'Description' longtext not null comment' project detailed description ',

The field type is longtext (LongText can contain a maximum of 4294967295 characters (2 ^ 32-1), although I do not know how big it is ).

Iii. jquery. base64

① Introduce jquery. base64.js

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

At the same time, set UTF-8 encoding to ensure that Chinese characters are not garbled.

$. Base64.utf8encode = true;

② Rich text form submission

Var editor = "<input type = 'den den 'name = '" + $ this. attr ("name") + "'value = '"
+ Pai.base64.btoa($this.html () + "'/> ";

Key code: Convert the html value of the Rich Text object to base64, and then encapsulate it in the form.
For details, see the following (encapsulation of the entire form submitted, refer to the dwz framework ):

/*** Submit an ajax form with File Upload ** @ param {Object} * form * @ param {Object} * callback */function iframeCallback (form, callback) {YUNM. debug ("File Upload processing"); var $ form = $ (form), $ iframe = $ ("# callbackframe"); // Rich Text Editor $ ("div. editor ", $ form ). each (function () {var $ this = $ (this); var editor = "<input type = 'den den 'name = '" + $ this. attr ("name") + "'value = '" + pai.base64.btoa(+this.html () + "'/>"; $ form. append (e Ditor) ;}); var data = $ form. data ('bootstrapvalidator'); if (data) {if (! Data. isValid () {return false ;}} if ($ iframe. size () = 0) {$ iframe = $ ("<iframe id = 'callbackframework' name = 'callbackframework' src = 'about: blank 'style = 'display: none '> </iframe> "). appendTo ("body");} if (! Form. ajax) {$ form. append ('<input type = "hidden" name = "ajax" value = "1"/>');} form.tar get = "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: '% 3 Chtml % 3E % 3C/html % 3E';" | // For // Safari iframe. src = "javascript: '
③ Rich Text data presentation
Certificate ('your editor'{.html ($. base64.atob (description, true ));
Decodes the html code stored in the database using base64.
④ Wysiwyg Components
For more information about wysiwyg package code, I have uploaded it to the CSDN code library.
Iv. Common html transcoding practices

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;}
Generally, the preceding two methods are used to encode and decode html data, but there is no way to store images.
The above is all the content of this article. I hope to help you understand the Rich Text Component wysiwyg.