...
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 | ||||||
---|---|---|---|---|---|---|
| ||||||
<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 | ||||||
---|---|---|---|---|---|---|
| ||||||
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 solid title Javascript 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; editor.Config['CustomConfigurationsPath'] = editor.BasePath + 'myconfig.js'; var link_url = worker_url + '&ServerPath='; var image_url = link_url + '&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.