This is my first post in here, but I hope it'll be useful.
Few days ago, I was searching this forum for any solution similar to wordpress text drafts. My firend is using FCKEditor in her site and she noticed that, sometimes when she writes especially long text (for a long time) server is loging her out. Of course - all text she already wrote is gone. She asked me for some "raw text version save". Because nothing I found, made this solution on my own.
Maybe someone has the same problem and looking for help - here is the idea.
Problem: How to create rough drafts of texts typed in FCKeditor field, using AJAX? (safety copies, "just in case")
Keywords: AJAX, draft, javascript, textarea, saving, MySQL, PHP
SOLUTION
1. We need to create table in database, where drafts are going to be saved. My table looks like this:
drafts
draft_id (INT) - main index of drafts, of course with auto_increment
draft (TEXT) - field where draft is being stored (or updated).
date (DATETIME) - date and time of last draft update[/code]
2. Create FCKeditor field.
In HEAD section paste:
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
In BODY section paste:
<script type="text/javascript"> var oFCKeditor = new FCKeditor('FCKeditor1'); oFCKeditor.BasePath = "fckeditor/"; oFCKeditor.Create(); </script>
3.PHP script
At the beginnig of text adding page, use this script
<?php //creating first record in draft table $create_draft = mysql_query ("INSERT INTO drafts VALUES (NULL, 'Nothing catched yet...', NOW())"); $draft_msg = "<p>Database is ready to draft catching.</p>"; /*yes, I know i can use mysql_insert_id function, to get id I want, but somehow not always it work properly. This may be not very "swift" solution, but... :P*/ $get_id = mysql_query ("SELECT draft_id FROM drafts ORDER BY draft_id DESC LIMIT 1"); while ($rd = mysql_fetch_array($get_id)) { $draft_id = $rd["draft_id"]; } echo '<form><input type="hidden" id="draft_id" name="draft_id" value="'.$draft_id.'" /></form>'; ?>
4. AJAX
In HEAD section paste:
<script type="text/javascript"> var xhr = false; //creating XMLHttpRequest if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } //as usual IE sucks -_- else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //function used to send data function send_draft() { if (xhr) { //id of the draft var draft_id = document.getElementById("draft_id").value; //draft itself var draft = FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML(); //php script - updates draft in database var url = "draft/savarticle.php?draft_id=" + draft_id; url+= "&draft=" + draft; xhr.open("GET", url); xhr.onreadystatechange = function () { if (xhr.readyState == 1 || xhr.readyState == 2 || xhr.readyState == 3) { var str='Update in progress...; document.getElementById("msg").innerHTML = str; } if (xhr.readyState == 4 && xhr.status == 200) { var str = 'Draft saved!'; document.getElementById("msg").innerHTML = str; } xhr.send(null); } } setTimeout('send_draft()', 30000); } </script>
In BODY section
Insert in BODY tag - onload="send_draft()" (i.e.
<body onload="send_draft()">
)
(NOTE! If you need to use few others function when page is loaded - simply put them together. I.e. <body onload="send_draft();other_function();yet_another();">. Useful, but seems not everyone knows that )
Also paste this thing - for info (draft status) -
<div id="msg"></div>
5. Draft updating script
Well, nothing special -
<?php $link = mysql_connect("adress","user","password"); mysql_select_db("database_name"); //everything what was send via AJAX $draft_id = $_GET["draft_id"]; $draft = $_GET["draft"]; $draftinger = mysql_query ("UPDATE drafts SET draft = '$draft', date = NOW() WHERE draft_id = '$draft_id'"); ?>
That's all. Maybe this is not the best way to solve the problem. Maybe it may be done better. What I posted is idea, base to further development. Enjoy
Oh! And sorry for my english or more likely - "funglish" ;P