CKEditor Custom File Browser

Hello,

I am having trouble trying to understand the CKEditor documentation, and just wanted a really basic example of a custom file browser page.

So for example if I had the following;

<script type="text/javascript">
//<![CDATA[

    CKEDITOR.replace( 'tePgContent',
      {
        filebrowserBrowseUrl : 'getLinks.html',
        filebrowserImageBrowseUrl : 'getImages.html',
    }); 

//]]>
</script>

What would a basic static getLinks.html file look like in order to have the following two clickable links on it, that would write the clicked link back to the editor?

I'm interested in a full HTML example for getLinks.html please - not a reference to window.opener.CKEDITOR.tools.callFunction in the documentation because this is where I am stuck :oops:

getLinks.html

<a href="www.google.com">Google</a>
<a href="www.microsoft.com">Microsoft</a>

Fri, 06/10/2011 - 07:39

imglib_dev

Joined: 12/01/2010

Posts: 50

Re: CKEditor Custom File Browser

Full page example - easy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple link selector</title>
</head>
<body>
<ul class="links">
   <li><a href="http://www.google.com" onclick="return select(this.href);">Google</a></li>
   <li><a href="http://www.apple.com" onclick="return select(this.href);">Apple</a></li>
</div>

<script type="text/javascript">
/*
 * Select some link to CKEditor
 */
function select(link) {
   // Get CKEditorFuncNum from page url
   var
      urlArg = window.location.search.substr(1).split('&'), // Split search strings to "name=value" pair
      tmp,
      params = {},
      i
   ;
   // P
   for (var i = urlArg.length; i-- > 0;) {
      // Split to param name and value ("name=value")
      tmp = urlArg[i].split('=');
      // Save it to object
      params[tmp[0]] = tmp[1];
   }

   // Check eviroment
   if (params.CKEditorFuncNum) {
      // Call CKEditor function to insert the URL
      window.opener.CKEDITOR.tools.callFunction(params.CKEditorFuncNum, link);
      // Close Window
      window.close();
   } else {
      // Else do nothing
      return false;
   }
}
</script>
</body>
</html>

Fri, 08/05/2011 - 04:59

sonic72

Joined: 10/06/2011

Posts: 2

Re: CKEditor Custom File Browser

Hello,

Thank you for the most helpful example.

How would I be able modify this so that the Link text is also set, not just the link itself?

Thanks again for your help.

Fri, 08/05/2011 - 12:50

mika03

Joined: 05/08/2011

Posts: 1

Re: CKEditor Custom File Browser

Thanks..i don't have to ask anymore I already got an answer for my question.thanks to you