Bootstrapは、wysiwygと呼ばれるリッチなテキストコンポーネントを提供します。これは、リッチなテキストデータの表示と編集に使用されますが、編集されたデータをMySQLデータベースに保存する方法は不明です。さらに、MySQLデータベースにWysiWygにデータを表示する方法はわかりません。これらの2つの問題については、解決策を教えてください！
1。エフェクトディスプレイ
まず、それがどのように機能するかを見てみましょう：
豊かなテキストに写真と数字のリストがあります
編集されたデータが正常に保存され、保存後に対応するディスプレイが正常に保存されていることがわかります。
2。リッチテキスト
Du Niangの豊富なテキストの説明は次のとおりです。
RICHテキスト形式（一般にRTFと呼ばれる）は、Microsoftが開発したクロスプラットフォームドキュメント形式です。ほとんどのワードプロセッシングソフトウェアは、RTFドキュメントを読み取り、保存できます。 RTFは、マルチテキスト形式を意味するリッチテキストフォーマットの略語です。これは、適切な互換性を備えたDOC形式（Word Document）と同様のファイルです。 Windows「アクセサリ」の「ワードパッド」を使用して開いて編集できます。 RTFは非常に人気のあるファイル構造であり、多くのテキストエディターがそれをサポートしています。フォントや段落の設定、ページ設定などの一般的な形式の設定はすべてRTF形式で存在できます。これにより、WordファイルとWPSファイル間の相互アクセスをある程度実現できます。
豊富なテキストに写真が含まれていない場合は、通常のHTMLトランスコーディング方法を使用できます。タイトル4を参照してください。豊富なテキストに写真が含まれている場合、通常のHTMLトランスコーディングは私たちを満たすことができなくなるため、jquery.base64.jsを使用する必要があります。タイトル3を参照してください。
その後、同時に、MySQLフィールドの定義を見てみましょう。
「説明 `Longtext Not Nullコメント」プロジェクト詳細説明 '、
フィールドタイプはロングテキストです（ロングテキストの最大長は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（）） + "' />";
キーコード：リッチテキストオブジェクトのHTML値をbase64に変換し、フォームにカプセル化します。
詳細については、以下を参照してください（フォーム提出されたフォームカプセル化、DWZフレームワークを参照）：
/** * ajax form fileでアップロード * * @param {object} * form * @param {object} * callback */function iframecallback（form、callback）{yunm.debug（ "file with file"）; 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（）; " 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';" 「JavaScript： '<html> </html>'; doc.body.innerhtml "false"）if（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;} 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;}一般的に、上記の2つの方法は、HTMLデータのエンコードとデコードに使用されますが、画像の保存については何もすることはありません。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するすべてです。誰もが豊富なテキストコンポーネントのwysiwygを理解することが役立つことを願っています。