Bootstrap 서식 있는 텍스트 구성 요소 wysiwyg의 데이터를 mysql_javascript 기술에 저장하는 방법
- WBOY원래의
- 2016-05-16 09:00:183250검색
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를 소개합니다
1d4b32e9f748cb4fc1460188aa2a7c732cacc6d41bbb37262a98f745aa00fbf0
한자가 깨지지 않도록 utf-8 인코딩을 동시에 설정하세요.
$.base64.utf8encode = true;
②, 서식 있는 텍스트 양식 제출
var editor = "ec9f3e21703258ef13df046ba5131078";
키 코드: 서식 있는 텍스트 개체의 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, "'");
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;
}
일반적으로 위의 두 가지 방법은 HTML 데이터를 인코딩하고 디코딩하는 데 사용되지만 이미지 저장에 관해서는 할 수 있는 일이 없습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들이 서식 있는 텍스트 구성 요소인 wysiwyg를 이해하는 데 도움이 되기를 바랍니다.