Edit a page with content editable and save it using php

Question

I am trying to wrap my head around a project that I would like to work on to attempt to get more familiar with programming in PHP.

I want to create a website that's easy to update without a full blown CMS. I was thinking of using the HTML5 contenteditable widget.

What I envision is the following:

1. User logs in and a session is started that will allow php to echo the content editable tag so that it's only visible when a user is authenticated.
2. Once logged in, the user can make changes to the file and click a save button and the file will be updated. THIS IS WHERE I NEED HELP

Is it possible to update the php file you are currently on? If it is, does it involve ajax or just pure php? How do I pass the content within the contenteditable widget to be saved on the server? I don't want to use FTP so I'm assuming I have to learn how to do this with AJAX? I hate to ask but if you have example code that would be awesome!

Lastly, is this a super major security risk?

Thanks in advance!

Atlante

Answer 1

I just did something like that. Considering you have already built a <form> that has a textbox and a submit button:

<form action="update.php" method="post">
  <div><label for="textArea">Your Message</label></div>
  <div><textarea name="textArea" id="textArea"></textarea></div>
  <div><input type="submit" value="Save" /></div>
</form>

Now you just need to do only one thing. Remove the <form> and replace the <textarea> with a contentEditable <div> like this:

<strong>Your Message</strong>
<div contenteditable id="textArea"></div>
<input type="button" value="Save" id="saveBtn" />

As you know, the above too acts as a Rich Text Editor, now you just need to do only one thing. Using jQuery, post the form using AJAX and do something:

$(function () {
  $("#saveBtn").click(function () {
    var text = $("#textArea").html();
    var url = "update.php";
    $.post(url, {textArea: text}, function () {
      $("#textArea").css("background", "#ccc").prop("contenteditable", false);
      alert("Thanks for your message!");
    });
  });
});

And to answer your question about Security, well, you have to have a perfectly patched server and use a HTTPS. This has to be handled only by the server side. The modern browsers are really secure enough.