多くの場合、サイトのコンテンツを編集するプロセスでは、完成した結果をブラウザーページで確認する必要があります（非常に便利です）。 HTML5タグのプロパティ（contenteditable、Jquery、Ajax、PHP）を使用して、サイト用のシンプルなHTML5テキストエディターを作成します。
エディターには次のプロパティがあります。
-編集するテキストをクリックすると、このテキストをすぐに編集できます。
-テキストの編集後にエスケープキーを押すと、現在のテキストへのすべての変更がキャンセルされます。
-フォーカスを失うか、クリックして他のテキストを編集すると、変更されたテキストがサーバーに送信され、サーバーの送信および応答のステータスに関するメッセージが送信されます。
以下は、編集されたページのHTMLコードです。
<!DOCTYPE html> <html lang="ru"> <body> <div id="wrap"> <h1 id="item1_title" contenteditable="true" ><a href="http://jquery.ua-opt.com/htm5-text-edit.html"> jquery HTML5 ajax</a></h1> <h3 id="item1_subtitle" contenteditable="true"> <i> HTML5 </i>, Jquery-Ajax-Php-mysql.</h3> <div id="item1_content" contenteditable="true"> html 5. . .</div> <button id="save"></button> </div> </body> </html>
ご覧のとおり、各編集可能なテキストは、
contenteditableプロパティがオンになっ
ているタグで囲まれています。これは、ブラウザーでテキストを直接編集できるHTML5チップです。 サーバーに保存するには、編集中のテキストを正確に識別する必要があります。したがって、idには、アンダースコアで区切られたマテリアル識別子とデータベースフィールドが含まれます。たとえば、id = "item1_title"です。
[保存]ボタンは、[保存]ボタンをクリックすることに慣れている人向けです。 ボタンをクリックすると、テキストがフォーカスを失い（変更された場合）残るため、特別なロードは実行されません。
ページのヘッダーで、style.cssとjqueryを接続します。
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title> jquery ajax</title> <link rel="stylesheet" href="css/style.css"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
次は実際にスクリプトです：
<script> var contentold={};
サーバー上で編集したテキストを受け入れます-save.phpファイル
<?php
表形式データのエディター（価格など）は特に便利です。テキストの書式設定は不要ですが、すぐに修正するか、新しいデータを追加する必要があります（スクリプトをアップグレードします）。 私自身のために、スクリプトをアップグレードして、寄付し、商品のデータベースに記入します。 この方法でデータベースにデータを入力することは、Excelの場合と同じくらい便利です。
シンプルなHTML編集スクリプトのデモ版[5 。
サンプルをダウンロードします 。