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
    borderStylesolid
    titleJavascript to implement file browsingborderStylesolid
    <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>
    

...