Versions Compared

Version Old Version 9 New Version 10
Changes made by

Pete Boysen

Pete Boysen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Use the following Javascript in your HTML code:
    Code Block
    titleJavascript to implement file browsing
    borderStylesolid
    <textarea id="myeditor" name="myeditor" cols="80" rows="24" wrap="virtual/>

<script type="text/javascript">
    var name = 'myeditor';
    var base_url = window.location.href;
    base_url = base_url.substring(0,base_url.indexOf('/tag.'));
    var editor = new FCKeditor(name,'100%','400','Default') ;
    editor.BasePath= base_url + '/fckeditor/';
    var worker_url = '<xsl:value-of select="$baseWorkerURL"/>';
    editor.Width = '400px';
    editor.Height = 400px';
    editor.Config['BaseHref'] = base_url + '/' + worker_url + '<xsl:value-of select="$base"/>';
    editor.Config['CustomConfigurationsPath'] = editor.BasePath + 'myconfig.js';
    var link_url = worker_url + '&amp;ServerPath=';
    var image_url = link_url + '&amp;Type=Image';
    // hack to convert to ampersands due to xslt processing
    image_url = image_url.replace(/amp;/gi,'');
    link_url = link_url.replace(/amp;/gi,'');
    editor.Config['ImageBrowserURL'] = editor.BasePath +     
        'editor/filemanager/browser/default/browser.html?Connector=../../../../../' + image_url;
    editor.Config['LinkBrowserURL'] = editor.BasePath +     
        'editor/filemanager/browser/default/browser.html?Connector=../../../../../' + link_url;
    editor.ReplaceTextarea() ;
</script>

...

In most cases, this code will return an XML file as response. The formats are explained on the FCKEditor site.

The BaseHref is also defined in the above Javascript. This allows you to display images within the editor. Because the
basehref cannot specify parameters, your channel has to look for a downloadworker URL request without any parameters and strip off the path after the worker URL.

Adding Plugins

Adding plugins isn't well documented but I have created Comment plugin that works like sticky notes. Insert a note and comment and it will appear when the mouse passes over the stick pin. It is still a work in progress (editing of existing comments has not been implemented and deleting one is a bit problematic) but it will demonstrate the process.

...

Code Block
FCKConfig.Plugins.Add( 'comment', 'en,it') ;

In ToolbarSets, at the tool "comment" to one of the arrays.

When the comment tool is clicked, the fck_comment.html will be displayed and prompts for the comment. The fckplugin.js file creates the FCKComment object and processes the comment when it is submitted. The appropriate HTML is then inserted into the HTML the user is entering.