How to save data of Bootstrap rich text component wysiwyg to mysql

How to save data of Bootstrap rich text component wysiwyg to mysql_javascript skills

WBOY

Release： 2016-05-16 09:00:18

Original

3235 people have browsed it

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 unknown. 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 solutions!

1. effect display

first, let’s take a look at the effect:

the rich text contains an image 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 text 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) and has good compatibility. it can be opened and edited using "wordpad" 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 and other information can be stored in rtf format, which can realize mutual access between word and wps files to a certain extent.
if the rich text does not contain images, we can use the ordinary html transcoding method, see title 4; if the rich text contains images, ordinary html transcoding cannot satisfy us, and we need to use jquery.base64.js, see title three.

at the same time, let’s take a look at the definition of mysql fields:

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

the field type is longtext (the maximum length of longtext is 4294967295 characters (2^32-1), although i don’t know how big it is).

3. jquery.base64

①.introduce jquery.base64.js

also set utf-8 encoding to ensure that chinese characters are not garbled.

$.base64.utf8encode = true;

②. rich text form submission

var editor = "";

key code: convert the html value of the rich text object to base64, and then encapsulate it into the form.
see the details below (a whole form submission form package, refer to the dwz framework):

/**
 * 带文件上传的ajax表单提交
 * 
 * @param {object}
 *      form
 * @param {object}
 *      callback
 */
function iframecallback(form, callback) {
  yunm.debug("带文件上传处理");

  var $form = $(form), $iframe = $("#callbackframe");

  // 富文本编辑器
  $("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);
  });
}

Copy after login

③. 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 library for detailed reference.

4. 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;
}

Copy after login

generally, the above two methods are used to encode and decode html data, but there is nothing you can do about saving images.

the above is the entire content of this article. i hope it will be helpful for everyone to understand the rich text component wysiwyg.