Bootstrap 서식 있는 텍스트 구성 요소 wysiwyg의 데이터를 mysql_javascript 기술에 저장하는 방법-JS 튜토리얼-php.cn

Bootstrap 서식 있는 텍스트 구성 요소 wysiwyg의 데이터를 mysql_javascript 기술에 저장하는 방법

WBOY

풀어 주다： 2016-05-16 09:00:18

원래의

3280명이 탐색했습니다.

Bootstrap은 서식 있는 텍스트 데이터를 표시하고 편집하는 데 사용되는 wysiwyg라는 서식 있는 텍스트 구성 요소를 제공하지만, 편집된 데이터를 MySQL 데이터베이스에 저장하는 방법은 알려져 있지 않습니다. 게다가 mysql 데이터베이스의 데이터를 어떻게 wysiwyg에 표시하는지 알려져 있지 않습니다. 이 두 가지 문제에 대한 해결 방법을 알려드리겠습니다!

1. 효과 표시

먼저 효과를 살펴보겠습니다.

서식 있는 텍스트에는 이미지와 숫자 목록이 포함되어 있습니다
편집된 데이터가 성공적으로 저장되고 저장 후 해당 화면이 표시되는 것을 볼 수 있습니다.

2. 서식 있는 텍스트

Du Niang의 리치 텍스트 설명은 다음과 같습니다.

RTF(일반적으로 RTF라고 함)는 Microsoft에서 개발한 크로스 플랫폼 문서 형식입니다. 대부분의 워드 프로세싱 소프트웨어는 RTF 문서를 읽고 저장할 수 있습니다. RTF는 Rich TextFormat의 약자로 다중 텍스트 형식을 의미합니다. DOC 형식(Word 문서)과 유사한 파일로 호환성이 좋습니다. Windows "액세서리"에서 "워드패드"를 사용하여 열고 편집할 수 있습니다. RTF는 매우 널리 사용되는 파일 구조이며 많은 텍스트 편집기에서 이를 지원합니다. 글꼴 및 단락 설정, 페이지 설정 및 기타 정보와 같은 일반 형식 설정은 RTF 형식으로 저장될 수 있으며 이는 어느 정도 단어와 wps 파일 간의 상호 액세스를 실현할 수 있습니다.
서식 있는 텍스트에 이미지가 포함되어 있지 않으면 일반적인 HTML 트랜스코딩 방법을 사용할 수 있습니다(제목 4 참조). 서식 있는 텍스트에 이미지가 포함되어 있으면 일반 HTML 트랜스코딩은 우리를 만족시킬 수 없으며 jquery.base64.js를 사용해야 합니다(제목 3 참조). .

동시에 mysql 필드의 정의를 살펴보겠습니다.

`description` longtext NOT NULL COMMENT '프로젝트 상세 설명',

필드 유형은 longtext입니다(LongText의 최대 길이는 4294967295자(2^32-1)이지만 얼마나 큰지는 모르겠습니다).

3. jquery.base64

① jquery.base64.js를 소개합니다

한자가 깨지지 않도록 utf-8 인코딩을 동시에 설정하세요.

$.base64.utf8encode = true;

②, 서식 있는 텍스트 양식 제출

var editor = "";

키 코드: 서식 있는 텍스트 개체의 HTML 값을 base64로 변환한 후 양식에 캡슐화합니다.
아래 세부 정보를 참조하세요(전체 양식 제출 양식 패키지, 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);
  });
}

로그인 후 복사

③、서식 있는 텍스트 데이터 표시

$('#editor').html($.base64.atob(설명, true));

데이터베이스에 저장된 html 코드를 base64를 통해 디코딩합니다.

IV, wysiwyg 컴포넌트

wysiwyg 컴포넌트 캡슐화 코드에 대해서는 자세한 참고를 위해 CSDN 코드 라이브러리에 올려두었습니다.

4. 일반적인 HTML 트랜스코딩 방법

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

로그인 후 복사

일반적으로 위의 두 가지 방법은 HTML 데이터를 인코딩하고 디코딩하는 데 사용되지만 이미지 저장에 관해서는 할 수 있는 일이 없습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들이 서식 있는 텍스트 구성 요소인 wysiwyg를 이해하는 데 도움이 되기를 바랍니다.