Page Comparison

...

Finally, create a textarea out of HTML as you normally would, making sure that you give it a name for both the ID and name attributes of the text area. Immediately after this, include Javascript like the following:

<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/';
    editor.Width = '400px';
    editor.Height = 400px';
    editor.Config['CustomConfigurationsPath'] = editor.BasePath + 'myconfig.js';
    editor.ReplaceTextarea() ;
</script>

...

FCKEditor provides for a large number of customizations. For example, in myconfig.js you can control the menu options that appear:

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Table','Rule','Smiley','SpecialChar','UniversalKey','Comment'/*,'Placeholder'*/],
	//['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	['TextColor','BGColor'],
	['About'],
	'/',
	['Style','FontFormat','FontName','FontSize']
] ;

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

...

• Use the following Javascript in your HTML code:

  Code Block
  borderStyle borderStyle solid title Javascript to implement file browsing solid
  <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; 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>

...

To display images and other files from the filesystem in the editor, the BaseHref must be set (see above example).
Because BaseHref cannot include parameters, I have set the BaseHref to just the baseWorkerURL. The browser will append the relative URL filenames to this URL. The appended URL will then be sent to the channel. To capture this request, I have made the Channel privileged and inspect the URL in setPortalControlStructures. If BaseWorker is called with no query parameters, I strip off the filename and set the downloadfile field in ThemeState. When ThemeState.setNextState is subsequently called, I set up a DownloadWorker for the requested file.

...

Adding plugins isn't well documented but I have created a Comment plugin that works like sticky notes. Insert to demonstrate the process of creating plugins. You can insert a note and comment and it will appear when the mouse passes over the stick pinstickpin. 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.

To install, unzip the attached comment.zip file and put in the fckeditor/editor/plugins directory. Put the following line in your myconfig.js file after FcKConfig.PluginsPath:

FCKConfig.Plugins.Add( 'commentComment', 'en,it') ;

In ToolbarSets, atadd the tool "commentComment" 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.