CKEditor + JQuery to load content [Solved + Code]

Good Morning/Evening.

I am fairly new to coding to work with CKEditor and am having some issue integrating it into another application.

I am trying to make the CKEditor work with the ajax example from
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

I have had some sucess using the following code as a replacment for the default DIV update.

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText;
CKEDITOR.instances.rightcolumn.destroy();
CKEDITOR.replace( 'rightcolumn' );
}

This causing a flickering of the interface that is somewhat annoying.

I have also tried using

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

document.getElementById(containerid).innerHTML=page_request.responseText;

CKEDITOR.instances.rightcolumn.setData( page_request.responseText, {
    callback: function() {
        this.checkDirty(); // true
    }
} );

What I am trying to do is have a list of links and have the same editor update them. My code currently works but poorly.

Anyone done something like this before or has seen a post on this. I have been looking but mostly find post that were for the old FCK editor and not the CKEditor that I am using.

Attaching the full code encase anyone wants to look at it.

Attachments:

Code from the dynamicdrive website with CKEDitor added.

Tue, 10/14/2014 - 05:39

savaries

Joined: 16/12/2011

Posts: 3

It may be an issue with the

It may be an issue with the way I am doing the updating. I was trying to work with the Jquery Adapter
and noticed that while the textarea updates the editor is updated with old informaiton.

function setValue() {
			$( '#editor1' ).val( $( '#rightcolumn' ).val() );
		}


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

document.getElementById(containerid).innerHTML=page_request.responseText;
setValue();

Not really sure how to correct it but I think I am getting closer. Any suggestions?

Wed, 10/15/2014 - 07:00

savaries

Joined: 16/12/2011

Posts: 3

Encase anyone else needs it.

The code below takes a url to a file or a page that quries a database and feeds it into both the original div and the CKeditor application. Have not had an issue yet but its supplied as is due to me being really new to this.

Improvments, constructive critisizum always appreciated.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".loadpage").click(function(){
  
     var me = $(this);
  
    $("#rightcolumn").load(me.val(),function(responseTxt,statusTxt,xhr){
  //  $("#div1").load("page.asp?content_id=1&page=1",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")
       //alert("External content loaded successfully!");
      //CKEDITOR.instances.rightcolumn.setData("Loading Page");
       CKEDITOR.instances.rightcolumn.setData(document.getElementById('rightcolumn').innerHTML);
       
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

function displayVals() {
var singleValues = $( "#stepnav-step1" ).val();

    $("#rightcolumn").load(singleValues,function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
             CKEDITOR.instances.rightcolumn.setData(document.getElementById('rightcolumn').innerHTML);
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });


}



</script>