FCKeditor, JQuery, PHP and MySQL

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



Save

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
...
...