エディターには次のプロパティがあります。
-編集するテキストをクリックすると、このテキストをすぐに編集できます。
-テキストの編集後にエスケープキーを押すと、現在のテキストへのすべての変更がキャンセルされます。
-フォーカスを失うか、クリックして他のテキストを編集すると、変更されたテキストがサーバーに送信され、サーバーの送信および応答のステータスに関するメッセージが送信されます。
以下は、編集されたページの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={}; // function savedata(elementidsave,contentsave) { // ajax $.ajax({ url: 'save.php', //url type: 'POST', data: { content: contentsave, // id:elementidsave }, success:function (data) { // - if (data == contentsave) // , ok { $('#'+elementidsave).html(data); // , $('<div id="status"> :'+data+'</div>') // .insertAfter('#'+elementidsave) .addClass("success") .fadeIn('fast') .delay(1000) .fadeOut('slow', function() {this.remove();}); // } else { $('<div id="status"> :'+data+'</div>') // .insertAfter('#'+elementidsave) .addClass("error") .fadeIn('fast') .delay(3000) .fadeOut('slow', function() {this.remove();}); // } } }); } $(document).ready(function() { $('[contenteditable="true"]') // .mousedown(function (e) // { e.stopPropagation(); elementid=this.id; contentold[elementid]=$(this).html(); // $(this).bind('keydown', function(e) { // Escape if(e.keyCode==27){ e.preventDefault(); $(this).html(contentold[elementid]); // } }); $("#save").show();// "" }) .blur(function (event) // { var elementidsave=this.id; //id var contentsave = $(this).html(); // event.stopImmediatePropagation(); if (elementid===elementidsave) // id id , , {$("#save").hide(); } // , if (contentsave!=contentold[elementidsave]) // { savedata(elementidsave,contentsave); // } }); }); </script>
サーバー上で編集したテキストを受け入れます-save.phpファイル
<?php //include("db.php"); $id= filter_input (INPUT_POST , 'id' , FILTER_SANITIZE_STRING ); $id=explode('_', $id); $itemid=mysql_real_escape_string($id[0]); $itempole=mysql_real_escape_string($id[1]); $content = $_POST['content']; //get posted data //$content = mysql_real_escape_string($content); //escape string //$sql = "UPDATE content SET $itempole = '$content' WHERE element_id = '$itemid' "; if ($content) { print $content; } else print '№1'; ?>
表形式データのエディター（価格など）は特に便利です。テキストの書式設定は不要ですが、すぐに修正するか、新しいデータを追加する必要があります（スクリプトをアップグレードします）。 私自身のために、スクリプトをアップグレードして、寄付し、商品のデータベースに記入します。 この方法でデータベースにデータを入力することは、Excelの場合と同じくらい便利です。
シンプルなHTML編集スクリプトのデモ版[5 。
サンプルをダウンロードします 。