CKeditor Tips

How to Make CKeditor Adjust to Site Moves

for fckeditor under asp — kv5r, March 3, 2009

Shop for web design and development books here.

Using FCKeditor in an ASP CMS, we have to change paths in several places when uploading a site from localhost to a remote server. There are several things to change:

  1. FCKConfig.BaseHref, in fckeditor/fckconfig.js
  2. FCKConfig.EditorAreaCSS, also in fckeditor/fckconfig.js
  3. oFCKeditor.BasePath, in the page that instantiates the editor
  4. ConfigUserFilesPath, in ...\filemanager\connectors\asp\config.asp
  5. All the paths to images and resources in the database.

FCKConfig.BaseHref, CSS, and Relative PathNames

The problem: We add a bunch of images and links to the database, then upload the site to the remote, and all the paths are wrong. The solution is to use only relative paths (no starting / ), and set BaseHref to make it work locally or remotely. But! The filebrowser will not work unless the ConfigUserFilesPath starts at the URL root! This gets added when a user selects a file (with Browse Server), so we need to strip it out when the user clicks a filename and pops it into the dialog.

First, look in fckeditor/fckconfig.js, and find FCKConfig.BaseHref, several lines down. Move it up above EditorAreaCSS, so we can use it for that, too. Make two of them and comment one out; then change EditorAreaCSS as shown:

FCKConfig.BaseHref = 'http://localhost/site/' ;
//FCKConfig.BaseHref = 'http://remotesite.com/' ;
// Put those above this line, then use it below, conveniently:
FCKConfig.EditorAreaCSS = FCKConfig.BaseHref + 'site.css' ;

FCK’s File Browser and Absolute Paths

Next, let’s get rid of the filebrowser’s tendency to add full path-names to resources. Let’s say your local copy is is in /site, but the remote is in /, the root of the url. These examples assume the resource is in a subfolder of the folder of the page that called it. YMMV. Edit
fckeditor\editor\filemanager\browser\default\frmresourceslist.html:

function ProtectPath(path)
{
 path = path.replace( /\\/g, '\\\\') ;
 path = path.replace( /'/g, '\\\'') ;
// Add: Filter out path, to use BaseHref:
 path = path.replace(/\//,'') ;      // eat the first "/"
 path = path.replace(/site\//,'') ;  // eat "site/", if it exists
// ---------------snip-------------------
 return path ;
}

In this example, we have our local in /mysites/site/, and the remote in /site/:

function ProtectPath(path)
{
 path = path.replace( /\\/g, '\\\\') ;
 path = path.replace( /'/g, '\\\'') ;
// Add: Filter out path, to use BaseHref:
 path = path.replace(/\//,'') ;        // eat the first "/"
 path = path.replace(/mysites\//,'') ; // if local, eat "mysites/"
 path = path.replace(/site\//,'') ;    // if remote, also eat "site/"
// ---------------snip-------------------
 return path ;
}

How it works: path will either be

  • /user/images/some.jpg, or
  • /mysites/site/user/images/some.jpg, or
  • /site/user/images/some.jpg

So:

  • If basepath = /user, then just eat the /
  • If basepath = /mysites/site/user, then also eat mysites/
  • If basepath = /site/user, then also eat site/
  • …and of course, we could add more eaters if needed.

Either way, we're left with user/image/some.jpg, and now BaseHref can do it’s thing (we don’t have to have the editor in the same folder as the page), no matter were we put the site and, and we don’t have to fiddle with it again unless we change a folder name.

Note the syntax of replace: the search string is bounded by slashes, that are not part of the search; and slashes that are part of the search must be escaped by backslashes. Red: the ends; blue: the escapes: (/site\//,''), so that means, eat “site/”. Also, don’t use the “g” (global) switch, because that would eat all the slashes in the string, and we just want to eat the first one.

ConfigUserFilesPath

The filebrowser will not work unless ConfigUserFilesPath is set pathed from the URL root of the server. The solution is to the server variable PATH_INFO to see where we are, the use a conditional to set it. Say you have a site in /site/, and upload it to /.

In fckeditor\editor\filemanager\connectors\asp\config.asp, after Dim ConfigUserFilesPath, put:

if request.servervariables("HTTP_HOST") = "localhost" then
 ConfigUserFilesPath = "/site/user/" 'local
else
 ConfigUserFilesPath = "/user/" 'remote
end if

Now it'll determine which user files path to use, and we don’t have to fiddle with it unless we change path names.

Note that we can’t eat the / here—FCK needs it else the filebrowser won’t work. That’s why we ate it above, on it’s trip from the filebrowser to the insert dialog, in Fred’s ProtectPath function.

Basepath at the Instantiation

The problem: The page that contains the editor instance has a basepath setting, which we have to change when we upload the site to remote. Make it find itself. In the page where you instantiate the editor, do like:

Dim sBasePath
sBasePath = Request.ServerVariables("PATH_INFO")
sBasePath = Left(sBasePath,InStrRev(sBasePath,"/edit.asp")) & "fckeditor/"
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = sBasePath
oFCKeditor.Value = rsText("text") ' from your access db recordset
oFCKeditor.Create "FCKeditor1"    ' must be also in editsave.asp

How it works: It gets PATH_INFO from the server, strips off the script name, then adds "fckeditor/" folder. So we end up with either:

  • oFCKeditor.BasePath = "/site/admin/fckeditor/" or
  • oFCKeditor.BasePath = "/admin/fckeditor/"

…depending on where we are.

Putting it all together, now we only have to change the BaseHref in fckconfig.js before uploading. That's a lot better than changing the instantiation, and the filebrowser, and the css, and all the paths in the database!

What About BaseHref?

That is set in fckconfig.js, and I don’t know how to get an ASP variable into it. I’ve tried both cookie and hidden field methods, but neither seem to work.

—kv5r

Leave a Reply

Your email address will not be published. Required fields are marked *