مشخصات HTML5 شامل یک امکان جدید به نام  contentEditable است . این خصیصه که در اکثر مرورگرهای بروز پشتیبانی می شود ما را قادر می سازد بتوانیم محتویات صفحه را در جا تغییر داده و ذخیره کنیم .شما می توانید بخش های مختلفی از صفحه را تعیین کنید که به صورت درجا قابل ویرایش باشند.راه استفاده از آن نیز ساده است و کافیست خصیصه  contentEditable را به تگ مورد نظر اعمال کنید . این خصیصه را می توان به همه نوع تگ html نیز نسبت داد مثلا تصاویر،لیست ها و حتی ویدیو البته فقط متون داخل این تگ ها قابلیت ویرایش دارند و بقیه اجزا را فقط می توان حذف کرد.

محدودیت دیگر  contentEditable این است که امکانی برای ذخیره متن ویرایش شده در اختیارمان قرار نمی دهد برای همین  از کتابخانه جاوااسکریپت jQuery و زبان برنامه نویسی PHP و پایگاه داده MySQL برای این کار استفاده می کنیم.

مرورگرهایی که خصیصه فوق را پشتیبانی می کنند :  Internet Explorer 6+, Firefox 4+, Safari 3.2+, Chrome 11+, و Opera 10.6+

در تصویر زیر نتیجه نهایی کارمان را مشاهده می کنید :

اجازه بدید با کدهای HTML شروع کنیم :

<div id="status"></div>
    <div id="content">
        <div id="editable" contentEditable="true">
            Lorem ipsum dolor sit amet...
        </div>
        <button id="save">Save</button>
    </div>

بوسیله کد بالا یک #editable ایجاد کردیم که حاوی متن مورد ویرایش ماست ،با یک دکمه برای ذخیره تغییرات . همچنین از یک div دیگر با آی دی #status برای نمایش پیام برگشتی سرور(PHP) استفاده کردیم

در بخش CSS شما می توانید هر استایل دلخواهی که خواستید به صفحه اعمال کنید ولی نکته مهم این است که دکمه ذخیره تغییرات در ابتدا باید مخفی باشد چون می خواهیم فقط وقتی روی بخش  #editable کلیک شد ظاهر شود

#status{
    display:none;
    margin-bottom:15px;
    padding:5px 10px;
    border-radius:5px;
}

#save{
    display: none;
    margin: 5px 10px 10px;
}

می توانید به بخش های دیگری هم که می خواهید طبق سلیقه خودتان css اضافه کنید .

حالا بریم سراغ کدهای jQuery

$("#editable").click(function (e) {
    $("#save").show();
    e.stopPropagation();
});

$(document).click(function() {
    $("#save").hide();
});

کد بالا در هر جایی که روی div قالب ویرایش کلیک شود دکمه ذخیره را هم نمایان می کند و اگر در هر جایی غیر از آن کلیک شود این دکمه را مخفی می کند.

حالا بایستی داده ها را به صورت ایجکس به سرور بفرستیم تا در دیتابیس ذخیره شوند

$("#save").click(function (e) {
    var content = $('#editable').html();
        $.ajax({
            url: 'save.php',
            type: 'POST',
            data: {
            content: content
            },
            success:function (data) {
                if (data == '1')
                {
                    $("#status")
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('slow')
                    .delay(3000)
                    .fadeOut('slow');
                }
                else
                {
                    $("#status")
                    .addClass("error")
                    .html("Error, data could not be saved")
                    .fadeIn('slow')
                    .delay(3000)
                    .fadeOut('slow');
                }
            }
        });
    });

کار کد بالا این است که داده ها را از  #editable بگیرد و به send.php به صورت post ارسال کند.اگر داده ها با موفقیت ارسال شوند بوسیله php دریافت شده و در دیتابیس ذخیره می شوند.وقتی این کار انجام شود مقدار 1 توسط php برگشت داده می شود.بوسیله این مقدار برگشتی ما می توانیم تشخیص دهیم که داده ها با موفقیت وارد دیتابیس شده اند و پیام ویرایش موفقیت آمیز را به کاربر در  #status نمایش می دهیم و الا بر عکس

محتویات فایل php

<?php
    $content = $_POST['content']; //get posted data
    $content = mysql_real_escape_string($content);  //escape string

    $sql = "UPDATE content
            SET text = '$content'
            WHERE element_id = '1'
            ";

    if (mysql_query($sql))
    {
        echo 1;
    }

?>

کد php بالا داده ها را می گیرد و مقدار دیتابیس رو با داده جدید بروز می کند.

همانطور که در بالا دیدید داخل تگ  #editable از متن ثابت استفاده کردیم ولی می توانید این مقدار را از دیتابیس بگیرید و نمایش دهید تا چرخه ویرایش کامل شود . برای دریافت و نمایش محتویات دیتابیس از کد زیر استفاده کردیم

<div id="editable" contentEditable="true">
<?php
//get data from database.
include("db.php");
$sql = mysql_query("select text from content where element_id='1'");
$row = mysql_fetch_array($sql);
echo $row['text'];
?>
</div>

خوب تمام شد :)می توانید از پایین هم پیش نمایش این مطلب رو ببینید و هم سورس کدهای اون رو دانلود کنید . البته در پیش نمایش تغییرات ذخیره نمی شوند و فقط پیام ذخیره نمایش داده می شود برای همین نمی توانید بعد از ریفرش صفحه تغییرات تون رو ببینید . اگر مشکلی در کدها دارید و یا سوالی در این مورد لطفا در انجمن سایت مطرح کنید تا بتونیم کامل جواب بدیم. در بخش نظرات خواهش می کنیم فقط نظرهای کوتاه خودتون رو قرار بدید . مرسی

[wpdm_file id=1]

پیش نمایش