CKEditor 4
Fri, 07/10/2009 - 15:13
#1
mojtabadj
mojtabadj's picture
Joined: 10/07/2009
Posts: 2

save fckeditor data with ajax



:)

:?
Top
Fri, 07/10/2009 - 17:02
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: save fckeditor data with ajax

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API
Add a dynamic Save function:Retrieving an Editor Instance -> GetXHTML( formatted )
http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktypeBUT
Top
Fri, 07/10/2009 - 21:01
mojtabadj
mojtabadj's picture
Joined: 10/07/2009
Posts: 2

Re: save fckeditor data with ajax






<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="image/style.css" rel="stylesheet">
<script language="javascript" src="js/page.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<title>admin</title>
</head>
<body>
<!----------------- Main table ----------------------------------------->
<table width="90%" cellpadding="0" cellspacing="0" align="center">
  <tr>
     <td colspan="2">
      <table width="100%" cellpadding="0" cellspacing="0" >
        <tr>
         <td width="11" height="45"><img src="image/header_bg_l.png" ></td>
         
         <td  style="background:url(image/header_bg.png) repeat-x">&nbsp;</td>
         <td height="45" width="11"><img src="image/header_bg_r.png" ></td>
        </tr>
      </table>
     </td>
  </tr>
    <tr>
     <td style="border-left:solid 2px #101010;" id="main" valign="middle" align="center">
      <div style="font-family:Tahoma;font-size:12px;color:#039;width:30%;height:20px;" 
      id="loading" >
      </div>
     </td>
     <!------------------- right menu ---------------->
     <td width="25%" style="border-left:solid 2px #101010;
     border-right:solid 2px #101010;" valign="top" align="center">
      <table width="90%" cellpadding="0" cellspacing="0" class="menu">
       <tr>
        <td>&nbsp;</td>
       </tr>
       <tr>
        <td>&nbsp;</td>
       </tr>
       <tr>
        <td >
          <a href="#" 
          onclick="Set_Content('get','pages.php','page=0',true,'main')">pages</a>
        </td>
       </tr>
       <tr>
        <td>&nbsp;</td>
       </tr>
      </table>
     </td>
  <!------------------- end of right menu ---------------->    
  </tr>
    <tr>
     <td colspan="2">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
         <td width="11" height="45"><img src="image/bottom_bg_l.png" ></td>
         
         <td  style="background:url(image/bottom_bg.png) repeat-x">&nbsp;</td>
         <td height="45" width="11"><img src="image/bottom_bg_r.png" ></td>
        </tr>
      </table>
     </td>
  </tr>
</table>
<!----------------- end of Main table ---------------------------------->
</body>
</html>






<?php
 //********************************************************************  
 function conn()
  {
    $connect=mysql_connect('localhost','root','');
    mysql_query(" SET NAMES 'utf8' ");  
     if (!$connect) 
      { 
       echo "Not Connect";
      }
    
    mysql_select_db('msdb');
    //exit();
  }  
 
//********************************************************************
        function myprint($str,$er)
       {
         if($er){
           echo" <center><span style='font-family:Tahoma;font-size:12px;color:#3C0;'>
            $str
            </span></center>";
            }else
            {
             echo" <center><span style='font-family:Tahoma;font-size:12px;color:#F30;'>
            $str
            </span></center>";   
            }
       }
       
//********************************************************************
function prepare_post_body($formvars)
{
  settype($formvars, "array");
  $postdata = '';
  if (count($formvars) == 0)
   return;
  reset($formvars);
  while(list($key,$val) = each($formvars)) {
   if (is_array($val) || is_object($val)) {
      while (list($cur_key, $cur_val) = each($val)) {
         $postdata .= urlencode($key)."[]=".urlencode($cur_val)."&";
      }
   } else
      $postdata .= urlencode($key)."=".urlencode($val)."&";
  }   
  return $postdata;
}
//********************************************************************
//********************************************************************
//********************************************************************
?>






<!----------------------------------------------------------------------------------->
<!----------------------------------------------------------------------------------->
<form method="post" action="sampleposteddata.php">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
 <td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="50%" align="right" class="op">Select your page: </td>
 <td width="50%" align="left">
   <select onchange="GetStates(this.options[this.selectedIndex].text)" id="sp" class="op">
    <option>Home</option>
   </select>
 </td>
</tr>
<tr><td colspan="2">
 <?php
 require('base.php');
 conn();
 //for($i=0;$i<100000000;$i++);
 $page=$_GET['page'];
//===========================================
//============ Save Info ====================

 $msg="page=".$page."&q=";
// Save current page
if(isset($_GET['q'])){
  $result=mysql_query("update pages set content='".$_GET['q']."' where id=".$page);
  if(!$result)
  {
    myprint('Not save',0);
   echo mysql_error();
  }else
  {
   myprint('Saved',1);  
  }

}
//===========================================
//===========================================
 $result=mysql_query("select * from pages where id=".$page);
 if(!$result)
  {
   echo mysql_error();
   exit();
  }
$row=mysql_fetch_array($result);             
/*function freeRTE_Preload($content) {
   // Strip newline characters.
   $content = str_replace(chr(10), " ", $content);
   $content = str_replace(chr(13), " ", $content);
   // Replace single quotes.
   $content = str_replace(chr(145), chr(39), $content);
   $content = str_replace(chr(146), chr(39), $content);
   // Return the result.
   return $content;
}*/
// Send the preloaded content to the function.
//$content = freeRTE_Preload($row['content']);
$content = $row['content'];
?>
</td></tr>
<tr>
 <td colspan="2" align="center">
<textarea name="Item_Text" id="Item_Text" rows="15" cols="88" tabindex="3">
<?php echo $content ?>
</textarea>
</td>
</tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr>
 <td colspan="2" align="center"><input  type="button" value="Save" 
 onclick="Set_Content('get','pages.php',
 '<?= $msg ?>'+ValueOfFCK(),true,'main')"
  name="s1" id="s1" class="input"/>
  
</td>
</tr>
</table></form>$##$myeditor('Item_Text');








function myeditor(Editor_name)
{

var sBasePath ='fckeditor/'

var oFCKeditor= new FCKeditor(Editor_name) ;

oFCKeditor.Config['ToolbarStartExpanded'] = true ;

oFCKeditor.BasePath      = sBasePath ;
//oFCKeditor.ToolbarSet   = 'DiamondPanel' ;
oFCKeditor.Value      ='' ;

oFCKeditor.Width=550;

var sSkinPath ='skins/silver/' ;

oFCKeditor.Config['SkinPath'] = sSkinPath ;

oFCKeditor.ReplaceTextarea() ;

return oFCKeditor;
}
<!--------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------> 
function Set_Content(Proccess_Type,Page_Address,Page_Address_Query,SynType,Content_Id)
{ 
      var HttpConn = MakeConnection();
      //alert('Page_Address_Query='+Page_Address_Query);
      if (Proccess_Type=='get')
      {
         HttpConn.open(Proccess_Type, Page_Address+'?'+Page_Address_Query,SynType);
      }
      else
      {
         HttpConn.open(Proccess_Type, Page_Address,SynType);
      }
      HttpConn.onreadystatechange = function () 
      {
         
         if (HttpConn.readyState==1)
            {
              if (document.getElementById('loading') != null) {
      document.getElementById('loading').innerHTML = 
   "Loading ..." + "<img src=\"image/loader.gif\" />"; 
     }
            }
         if ((HttpConn.readyState == 4)&&(HttpConn.status == 200)) 
         {
                if (document.getElementById('loading') != null) {
                 document.getElementById('loading').innerHTML = "";
                 }
             var   MyResponse1=HttpConn.responseText.split('$##$');
            document.getElementById(Content_Id).innerHTML=MyResponse1[0];            
            eval(MyResponse1[1]);
            
         }
      };
      
      if (Proccess_Type=='get')
      {
         HttpConn.send(null);
      }
      else
      {
         HttpConn.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         HttpConn.send(Page_Address_Query);
      }
}
<!---------------------------------------------------------------------------------------> 
function ValueOfFCK()
{
  var field = FCKeditorAPI.GetInstance('Item_Text'); 
  var value = field.GetHTML(false);
  return value;
}
<!--------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------> 
<!--------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------->
function MakeConnection()
{
   var httpRequest;
   if (window.XMLHttpRequest) // Mozilla, Safari, Opera
    {
       httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType)
        {
           httpRequest.overrideMimeType('text/html');
        }
   }
    else if (window.ActiveXObject)  // IE
    {
       try   {   httpRequest = new ActiveXObject("Msxml2.XMLHTTP");   }
        catch (e)
        {
           try   {     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");    }
         catch (e) {}
      }
   }
    if (!httpRequest)
   {
         alert('ERROR : Cannot create an XMLHTTP instance!');
        return false;
    }
   return httpRequest;
}
<!--------------------------------------------------------------------------------------->
Top
Mon, 07/13/2009 - 15:56
krappies
krappies's picture
Joined: 30/06/2009
Posts: 48

Re: save fckeditor data with ajax



:D
    <script src="jquery-1.2.6.pack.js" type="text/javascript"></script>

    <script type="text/javascript">
        function Set_Content() {
            //** SEE http://docs.jquery.com/Ajax
            $.ajax({
                url: "pages.php", //page to call
                type: "GET",//GET or POST
                data: ({ page: 0, SOMEOTHER:"SOME VALUE" }),//PARAMS TO PASS TO PAGE
                dataType: "html",//type of data expected back
                success: function(msg) { //function to execute on success
                    $("#Content_Id").html(msg);//sets the html (document.getelementbyid('Content_Id').innerhtml)
                },
                error: function(msg) {//function to execute on errors
                $("#Content_Id").html(""); //sets the html (document.getelementbyid('Content_Id').innerhtml)
                }
            });
        }

        $(document).ready(function() {//registes all these when the page has loaded an dom is ready
        //** SEE http://docs.jquery.com/Ajax  -> AJAX EVENTS
            //whenever ajax starts
            $("#loading").ajaxStart(function() {
                $(this).html("Loading ..." + "<img src=\"image/loader.gif\" />");
            });
            //whenever ajax succeeds
            $("#loading").ajaxSuccess(function(evt, request, settings) {
                $(this).html(""); //there is a way to clear it, think .clear()
            });
            //whenever ajax errors
            $("#loading").ajaxError(function(event, request, settings) {
                $(this).append("Error requesting page " + settings.url);
            });
        });
    </script>


Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check