Set Full Image Path in FCK Editor

        We have used FCK editor as an HTML editor for our recent project. It is one the best and easy to integrate HTML editor available free. When I test the editor on local server and it works fine. However when we add image using FCK editor the image path is relative to tour webpage. So if you have created an email template using FCK editor and you sends email to your customers they will not able see the image.

Fig - (1) Relative Image path in FCK editor

              We need to use full image path in FCK editor to display the image. You can change SetUrl function at following place to set full image path in FCK editor. You can find SetUrl function in fck_image.js fule at “FckEditor\editor\dialog\fck_image”. Below is the original function,

function SetUrl( url, width, height, alt )

{

    if ( sActualBrowser == 'Link' )

    {

        GetE('txtLnkUrl').value = url ;

        UpdatePreview() ;

    }

    else

    {

        GetE('txtUrl').value = url ;

        GetE('txtWidth').value = width ? width : '' ;

        GetE('txtHeight').value = height ? height : '' ;

        if ( alt )

            GetE('txtAlt').value = alt;

        UpdatePreview() ;

        UpdateOriginal( true ) ;

    }

    dialog.SetSelectedTab( 'Info' ) ;

}

Fig - (2) SetUrl function of FCK Editor

          Change GetE(‘txtUrl’).value = url, first line in else condition to GetE(‘txtUrl’).value = “http://www.xyz.com” + url. See the changed line below,

GetE('txtUrl').value = 'http://www.xyz.com' + url ;

Fig - (3) Changed function.

           Save fck_image.js  file and now check the image path. FCK editor will take full image path instead of relative.

Fig - (4) Full Image Path in FCK Editor

 

Set Full path for Flash File

            Same way you have to change fck_flash.js file at FckEditor\editor\dialog\fck_flash folder to set fill flash path in FCK Editor.

 

Happy Programming !!!