This is a quick dirty tutorial in how to integrate FCKeditor, JQuery and PHP, I'm leaving MySQL outside because it will be simple to implement and I would like to keep the tutorial simple as possible.
For this tutorial you will need to have PHP-Json installed, FCKeditor and JQuery.
At the time the document load you will need to create a FCKeditor API instance and store in a global variable
oEditor
// global variable for FCKeditor API
var oEditor;
$(window).load(function () {
oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
});
This javascript function will be responsible to query the PHP "text_load.php", and
oEditor.SetHTML will store the text receive via jason into the FCKeditor
function text_load(){
$.getJSON("text_load.php,
function(data){
oEditor.SetHTML(data.text);
$("#editor").show();
});
}
To save the text you should call this function, the
oEditor.GetXHTML will retrieve the text in the FCKeditor and store in the variable
text.
function text_save(){
var text = oEditor.GetXHTML();
$.getJSON("text_save.php?text="+ text,
function(data){
$("#editor").hide();
});
}
The HTML code is very simple, the
Load href will trigger the
text_load function and load the text into the FCKeditor. The
Save href will trigger the
text_save() that will be responsible to send the text to the php page to save.
Load
Here is the load and save page in PHP that will interact with the Ajax/Json javascript. The trick is use
urldecode and
urlencode to load and save from the database.
This is the
text_load.php to load the text and send to the javascript
$output = array();
mysql code
...
...
// the rows will be stored
// in the $row[] variable
$output['text']= urldecode($row['text']);
echo json_encode($output);
exit;
This is the
text_save.php to get the text from javascript and save in the mysql table. The text from FCKeditor will be stored in
$text.
// get the query string
$text = urlencode($_REQUEST["text"]);
mysql code
...
...
