Bootstrap provides a rich text component called wysiwyg, which is used to display and edit rich text data, but it is unknown how to save the edited data to the MySQL database. In addition, it is not known how to display the data in the mysql database to wysiwyg. For these two problems, let me tell you the solution!
1. Effect display
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 that the edited data is saved successfully and the corresponding display after saving.
2. Rich text
Du Niang's explanation of rich texts is as follows:
Rich Text Format (generally referred to as RTF) is a cross-platform document format developed by Microsoft. Most word processing software can read and save RTF documents. RTF is the abbreviation of Rich TextFormat, which means multi-text format. This is a file similar to DOC format (Word document) with good compatibility. You can open and edit it using the "Word Pad" in Windows "Accessories". RTF is a very popular file structure, and many text editors support it. General format settings, such as font and paragraph settings, page settings, etc., can all exist in RTF format, which can realize mutual access between word and wps files to a certain extent.
If the rich text does not contain pictures, we can use the ordinary html transcoding method, see title 4; if the rich text contains pictures, the ordinary html transcoding can no longer satisfy us, so we need to use jquery.base64.js, see title 3.
Then 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 has a maximum length of 4294967295 characters (2^32-1), although I don't know how big it is).
3. jquery.base64
①. Introduce 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.
$.base64.utf8encode = true;
②, Submit rich text form
var editor = "<input type='hidden' name='" + $this.attr("name") + "' value='"
+ $.base64.btoa($this.html()) + "' />";
Key code: Convert the html value of the rich text object to base64 and then encapsulate it into the form form.
See the following for details (a whole form submitted form encapsulation, refer to the dwz framework):
/** * Ajax form uploaded with file* * @param {Object} * form * @param {Object} * callback */function iframeCallback(form, 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(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); });}③, rich text data display
$('#editor').html($.base64.atob(description, true));
Decode the html code saved in the database through base64.
④, wysiwyg component
Regarding the wysiwyg component encapsulation code, I have uploaded it to the CSDN code base, which can be referenced in detail.
4. Ordinary HTML transcoding method
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(//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 speaking, the above two methods are used to encode and decode the html data, but there is nothing to do about the image saving.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article. I hope it will be helpful for everyone to understand the rich text component wysiwyg.