Bootstrap은 wysiwyg라는 풍부한 텍스트 구성 요소를 제공합니다. Wysiwyg는 리치 텍스트 데이터를 표시하고 편집하는 데 사용되지만 편집 된 데이터를 MySQL 데이터베이스에 저장하는 방법은 알려져 있지 않습니다. 또한 MySQL 데이터베이스의 데이터를 wysiwyg에 표시하는 방법은 알려져 있지 않습니다. 이 두 가지 문제에 대해서는 해결책을 알려 드리겠습니다!
1. 효과 디스플레이
먼저 작동 방식을 살펴 보겠습니다.
풍부한 텍스트에 그림이 있습니다.
편집 된 데이터가 성공적으로 저장되고 저장 후 해당 디스플레이가 저장되어 있음을 알 수 있습니다.
2. 풍부한 텍스트
Du Niang의 풍부한 텍스트에 대한 설명은 다음과 같습니다.
Rich Text 형식 (일반적으로 RTF라고 함)은 Microsoft가 개발 한 크로스 플랫폼 문서 형식입니다. 대부분의 워드 프로세싱 소프트웨어는 RTF 문서를 읽고 저장할 수 있습니다. RTF는 풍부한 TextFormat의 약어이며, 이는 다중 텍스트 형식을 의미합니다. 이것은 호환성이 우수한 Doc 형식 (Word Document)과 유사한 파일입니다. Windows "액세서리"에서 "Word Pad"를 사용하여 열고 편집 할 수 있습니다. RTF는 매우 인기있는 파일 구조이며 많은 텍스트 편집기가이를 지원합니다. 글꼴 및 단락 설정, 페이지 설정 등과 같은 일반적인 형식 설정은 모두 RTF 형식으로 존재할 수 있으며, 이는 Word와 WPS 파일 간의 상호 액세스를 어느 정도 실현할 수 있습니다.
풍부한 텍스트에 그림이 포함되어 있지 않으면 일반적인 HTML 트랜스 코딩 방법을 사용할 수 있습니다. 제목 4를 참조하십시오. 풍부한 텍스트에 그림이 포함 된 경우 일반 HTML 트랜스 코딩은 더 이상 우리를 만족시킬 수 없으므로 jquery.base64.js를 사용해야합니다. 제목 3을 참조하십시오.
그런 다음 동시에 MySQL 필드의 정의를 살펴 보겠습니다.
`description` longtext null 댓글이 아닙니다 '프로젝트 세부 설명',
필드 유형은 LongText입니다 (LongText의 최대 길이는 4294967295 자 (2^32-1)입니다.
3. jQuery.base64
①. jquery.base64.js를 소개합니다
<script type = "text/javascript"src = "$ {ctx}/components/jquery/jquery.base64.js"> </script>
동시에, 중국어가 무너지지 않도록 UTF-8 인코딩을 설정하십시오.
$ .base64.utf8encode = true;
②, 풍부한 텍스트 양식을 제출하십시오
var editor = "<input type = 'hidden'name = '" + $ this.attr ( "name") + "'value = '"
+ $ .base64.btoa ($ this.html ()) + " ' />";
키 코드 : Rich Text Object의 HTML 값을 Base64로 변환 한 다음이를 양식 양식으로 캡슐화하십시오.
자세한 내용은 다음을 참조하십시오 (전체 양식 제출 된 양식 캡슐화, DWZ 프레임 워크 참조).
/** * ajax 양식 파일 * * @param {object} * form * @param {object} * 콜백 */function iframecallback (form, callback) {yunm.debug ( "파일로 업로드"); 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 ())'); 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], 콜백 || yunm.ajaxdone);} 함수 _iframeresponse (iframe, 콜백) {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'; "<html> </html>;") {// var doc = contentDocument || doc.innerhtml == "doc.xmldocument; {// html 문서 또는 Doc.body.innerhtml} {// 응답}};③, 풍부한 텍스트 데이터 표시
$ ( '#editor'). html ($. base64.atob (description, true));
Base64를 통해 데이터베이스에 저장된 HTML 코드를 디코딩하십시오.
④, wysiwyg 구성 요소
Wysiwyg 구성 요소 캡슐화 코드와 관련하여 CSDN 코드 기반에 업로드했으며이를 자세히 참조 할 수 있습니다.
4. 일반 HTML 트랜스 코딩 방법
함수 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;} 함수 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 데이터를 인코딩하고 디코딩하는 데 사용되지만 이미지 저장에 대해서는 할 일이 없습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사에 관한 것입니다. 모든 사람이 풍부한 텍스트 구성 요소 Wysiwyg를 이해하는 것이 도움이되기를 바랍니다.