Bagaimana untuk menyimpan data komponen teks kaya Bootstrap wysiwyg kepada kemahiran mysql

Bagaimana untuk menyimpan data komponen teks kaya Bootstrap wysiwyg kepada kemahiran mysql_javascript

WBOY

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

asal

3245 orang telah melayarinya

Bootstrap menyediakan komponen teks kaya yang dipanggil wysiwyg, yang digunakan untuk memaparkan dan mengedit data teks kaya, tetapi cara untuk menyimpan data yang diedit ke pangkalan data MySQL tidak diketahui. Di samping itu, tidak diketahui cara untuk memaparkan data dalam pangkalan data mysql kepada wysiwyg Untuk kedua-dua masalah ini, izinkan saya memberitahu anda penyelesaiannya!

1. Paparan kesan

Pertama, mari kita lihat kesannya:

Teks kaya mengandungi imej dan senarai nombor
Kita dapat melihat bahawa data yang diedit berjaya disimpan dan paparan yang sepadan selepas disimpan.

2. Teks kaya

Penjelasan Du Niang tentang teks kaya adalah seperti berikut:

Format Teks Kaya (biasanya dirujuk sebagai RTF) ialah format dokumen merentas platform yang dibangunkan oleh Microsoft. Kebanyakan perisian pemprosesan perkataan boleh membaca dan menyimpan dokumen RTF. RTF ialah singkatan Rich TextFormat, yang bermaksud format berbilang teks. Ini adalah fail yang serupa dengan format DOC (dokumen Word) dan mempunyai keserasian yang baik Ia boleh dibuka dan diedit menggunakan "WordPad" dalam Windows "Aksesori". RTF ialah struktur fail yang sangat popular dan banyak penyunting teks menyokongnya. Tetapan format umum, seperti tetapan fon dan perenggan, tetapan halaman dan maklumat lain boleh disimpan dalam format RTF, yang boleh merealisasikan akses bersama antara fail perkataan dan wps pada tahap tertentu.
Jika teks kaya tidak mengandungi imej, kami boleh menggunakan kaedah transkod HTML biasa, lihat Tajuk 4 jika teks kaya mengandungi imej, transkod HTML biasa tidak dapat memuaskan hati kami dan kami perlu menggunakan jquery.base64.js, lihat Tajuk tiga; .

Pada masa yang sama, mari kita lihat definisi medan mysql:

teks panjang `penerangan` BUKAN NULL KOMEN 'Penerangan terperinci projek',

Jenis medan ialah teks panjang (panjang maksimum LongText ialah 4294967295 aksara (2^32-1), walaupun saya tidak tahu berapa besarnya).

3. jquery.base64

①, perkenalkan jquery.base64.js

Tetapkan pengekodan utf-8 pada masa yang sama untuk memastikan aksara Cina tidak bercelaru.

$.base64.utf8encode = benar;

②, Penyerahan borang teks kaya

var editor = "";

Kod kunci: Tukar nilai HTML objek teks kaya kepada base64, dan kemudian masukkannya ke dalam borang.
Lihat butiran di bawah (pakej borang penyerahan keseluruhan borang, rujuk rangka kerja dwz):

/**
 * 带文件上传的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);
  });
}

Salin selepas log masuk

③、Paparan data teks kaya

$('#editor').html($.base64.atob(huraian, benar));

Nyahkod kod html yang disimpan dalam pangkalan data melalui base64.

④, komponen wysiwyg

Mengenai kod enkapsulasi komponen wysiwyg, saya telah memuat naiknya ke perpustakaan kod CSDN untuk rujukan terperinci.

4. Kaedah transkod HTML biasa

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

Salin selepas log masuk

Secara amnya, dua kaedah di atas digunakan untuk mengekod dan menyahkod data html, tetapi tiada apa yang boleh anda lakukan untuk menyimpan imej.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang memahami komponen teks kaya wysiwyg.