Bootstrapリッチテキストコンポーネントwysiwygのデータをmysql_javascriptスキルに保存する方法-jsチュートリアル-php.cn

Bootstrapリッチテキストコンポーネントwysiwygのデータをmysql_javascriptスキルに保存する方法

WBOY

リリース： 2016-05-16 09:00:18

オリジナル

3247 人が閲覧しました

bootstrap は、リッチテキストデータの表示と編集に使用される wysiwyg と呼ばれるリッチテキストコンポーネントを提供しますが、編集したデータを mysql データベースに保存する方法は不明です。また、mysql データベースのデータを wysiwyg に表示する方法がわかりませんこの 2 つの問題について、解決策を説明します。

1. エフェクトの表示

まず、効果を見てみましょう。

リッチテキストには画像と数値のリストが含まれています
編集したデータが正常に保存され、保存後の対応する表示が確認できます。

2. リッチテキスト

du niang によるリッチテキストの説明は次のとおりです。

リッチテキストフォーマット (一般に rtf と呼ばれる) は、microsoft によって開発されたクロスプラットフォームのドキュメント形式です。ほとんどのワープロソフトウェアは、rtf ドキュメントを読み取って保存できます。 rtfとはrich textformatの略で、マルチテキスト形式を意味します。 doc形式（word文書）に似た互換性のあるファイルで、windowsの「アクセサリ」の「ワードパッド」で開いて編集できます。 rtf は非常に人気のあるファイル構造であり、多くのテキストエディターがそれをサポートしています。フォントや段落の設定、ページの設定、その他の情報などの一般的な形式設定を rtf 形式で保存でき、word ファイルと wps ファイルの間である程度の相互アクセスを実現できます。
リッチテキストに画像が含まれていない場合は、通常の html トランスコーディング方法を使用できます (タイトル 4 を参照)。リッチテキストに画像が含まれている場合、通常の html トランスコーディングでは満足できないため、jquery.base64.js を使用する必要があります (タイトル 3 を参照) 。

同時に、mysql フィールドの定義を見てみましょう。

`description` 長いテキスト not null comment 'プロジェクトの詳細な説明',

フィールドのタイプはロングテキストです (ロングテキストの最大長は 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(description, true));

データベースに保存されている html コードを base64 経由でデコードします。

④、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データのエンコード、デコードには上記2つの方法が一般的ですが、画像の保存についてはどうすることもできません。

上記がこの記事の全内容です。リッチテキストコンポーネント wysiwyg を理解するのに役立つことを願っています。