Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

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:

Code Block
borderStylesolid
titleJavascript to call FCKEditorborderStylesolid

<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:

Code Block
borderStylesolid
titleChanging Menu OptionsborderStylesolid
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
    borderStylesolid
    titleJavascript to implement file browsingsolid
    <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>
    

...

Code Block
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.