Differences

This shows you the differences between two versions of the page.

Link to this comparison view

glfusion:editor [2010/02/18 04:31]
Mark
glfusion:editor [2014/04/04 00:25] (current)
Mark
Line 1: Line 1:
 ====== glFusion Advanced Editor ====== ====== glFusion Advanced Editor ======
-glFusion utilizes the robust [[http://www.fckeditor.net/|FCKeditor]] and can be easily customized to meet your specific needs.+glFusion supports multiple WYIWYG advanced editors.  Out of the box, it comes with CKEditor 
  
-===== Editor Menus =====+CKEditor cna be customized to meet your specific needs.
  
-glFusion comes with 4 pre-configured menus for the advanced editor:+If you prefer, there is a TinyMCE plugin available as well. 
  
-{{:glfusion:basic.png|}}+===== CKEditor Toolbars =====
  
-Basic Toolbar used for comment entry.+glFusion comes with 2 pre-configured toolbars for the advanced editor:
  
----- +{{:glfusion:toolbar-basic.png|}}
-{{:glfusion:common.png|}}+
  
-User Toolbar - used for user submitted stories.+Basic Toolbar - used for comment entry, contact users, and other simple editing tasks
  
 ---- ----
 +{{:glfusion:toolbar-standard.png?300|}}
  
-{{:glfusion:advanced.png|}} +Standard Toolbar - used for story entry or static page edits. 
- +
-Advanced Toolbar - used for story static page edits. +
- +
----- +
- +
-{{:glfusion:full-featured.png|}} +
- +
-Full Featured Toolbar - not used by default, but available to site admins in the toolbar dropdown menu. +
- +
-===== Configuring the Default Toolbar ===== +
- +
-The toolbars listed above have //internal names// that are used in the configuration files to control which one is used and how they look.  They map out like this: +
- +
-^Common Name  ^Configuration Name  ^ +
-|Basic Toolbar  |editor-toolbar1  | +
-|Common Toolbar |editor-toolbar2  | +
-|Advanced Toolbar  |editor-toolbar3  | +
-|User Toolbar  |editor-toolbar4  | +
-|Full Featured Toolbar  |Default  | +
-|Forum Toolbar  |forum-toolbar  | +
- +
-You can configure which toolbar is used for Story Edits (Admins), Story Edits (User), and Comments. +
- +
-==== User Submitted Stories ==== +
- +
-To change the toolbar used for User Submitted Stories, you will need to edit the **submitstory_fckeditor.js** file located in the public_html/js/ directory.  You will see the following line in the **submitstory_fckeditor.js** file: +
- +
-  oFCKeditor1.ToolbarSet = 'editor-toolbar4' ; +
- +
-You can change **editor-toolbar4** to one of the toolbars listed above.  A little further down the **submitstory_fckeditor.js** file you will see another toolbar definition, this one is used for the **body text** entry.  You should change it as well: +
- +
-  oFCKeditor2.ToolbarSet = 'editor-toolbar4' ; +
-====== Modifying the Editor Toolbar ====== +
- +
-The toolbars are defined in the public_html/fckeditor/myconfig.js file. +
- +
-<code> +
-FCKConfig.ToolbarSets["Default"] = [ +
-    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], +
-    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], +
-    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], +
-    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], +
-    '/', +
-    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], +
-    ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], +
-    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], +
-    ['Link','Unlink','Anchor'], +
-    ['Image','mediagallery','video','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], +
-    '/', +
-    ['Style','FontFormat','FontName','FontSize'], +
-    ['TextColor','BGColor'], +
-    ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. +
-] ; +
- +
-</code> +
- +
-^Editor Property  ^Button  ^Description  ^ +
-|Source  |  {{:glfusion:editor:source.png|}}  |View Page Source  | +
-|DocProps  |  {{:glfusion:editor:properties.png|}}  |View Document Properties  | +
-|Save  |  {{:glfusion:editor:save.png|}}  |Save  | +
-|NewPage  |  {{:glfusion:editor:newpage.png|}}  |New Page  | +
-|Preview  |  {{:glfusion:editor:preview.png|}}  |Preview  | +
-|Templates  |  {{:glfusion:editor:templates.png|}}  |Templates  | +
-|Cut  |  {{:glfusion:editor:cut.png|}}  |Cut highlighted text  | +
-|Copy  |  {{:glfusion:editor:copy.png|}}  |Copy highlighted text  | +
-|Paste  |  {{:glfusion:editor:paste.png|}}  |Paste from clipboard  | +
-|PasteText  |  {{:glfusion:editor:paste-plain.png|}}  |Paste as plain text  | +
-|PasteWord  |  {{:glfusion:editor:paste-word.png|}}  |Paste from Word - Attempts to clean up some of the MS Word formatting  | +
-|Print  |  {{:glfusion:editor:print.png|}}  |Print document  | +
-|SpellCheck  |  {{:glfusion:editor:spellchecker.png|}}  |Spellcheck document  | +
-|Undo  |  {{:glfusion:editor:undo.png|}}  |Undo  | +
-|Redo  |  {{:glfusion:editor:redo.png|}}  |Undo the undo (or redo...)  | +
-|Find  |  {{:glfusion:editor:find.png|}}  |Search within the editor  | +
-|Replace  |  {{:glfusion:editor:replace.png|}}  |Replace text  | +
-|SelectAll  |  {{:glfusion:editor:selectall.png|}}  |Select All  | +
-|RemoveFormat  |  {{:glfusion:editor:remove-format.png|}}  |Remove all formatting  | +
-^HTML Forms  ^^^ +
-|Form  |  {{:glfusion:editor:form.png|}}  |Insert an HTML form  | +
-|Checkbox  |  {{:glfusion:editor:checkbox.png|}}  |Insert a checkbox  | +
-|Radio  |  {{:glfusion:editor:radiobutton.png|}}  |Insert a radio button  | +
-|TextField  |  {{:glfusion:editor:textfield.png|}}  |Insert a text field  | +
-|Textarea  |  {{:glfusion:editor:textarea.png|}}  |Insert a textarea  | +
-|Select  |  {{:glfusion:editor:selection.png|}}  |Insert a drop down select box  | +
-|Button  |  {{:glfusion:editor:button.png|}}  |Insert a button  | +
-|ImageButton  |  {{:glfusion:editor:image.png|}}  |Upload or insert an image  | +
-|HiddenField  |  {{:glfusion:editor:hiddenfield.png|}}  |Insert a hidden input  | +
-^Formatting Features  ^^^ +
-|Bold  |  {{:glfusion:editor:bold.png|}}  |Bold highlighted text  | +
-|Italic  |  {{:glfusion:editor:italics.png|}}  |Italicize highlighted text  | +
-|Underline  |  {{:glfusion:editor:underline.png|}}  |Underline highlighted text  | +
-|StrikeThrough  |  {{:glfusion:editor:strikethrough.png|}}  |Strikethrough the highlighted text  | +
-|Subscript  |  {{:glfusion:editor:subscript.png|}}  |Make text a sub script  | +
-|Superscript  |  {{:glfusion:editor:superscript.png|}}  |Make text a super script  | +
-|OrderedList  |  {{:glfusion:editor:numberlist.png|}}  |Ordered list  | +
-|UnorderedList  |  {{:glfusion:editor:bulletlist.png|}}  |Bullet List  | +
-|Outdent  |  {{:glfusion:editor:decreaseindent.png|}}  |Move text to the left  | +
-|Indent  |  {{:glfusion:editor:increaseindent.png|}}  |Move text to the right  | +
-|Blockquote  |  {{:glfusion:editor:blockquote.png|}}  |Block quote  | +
-|JustifyLeft  |  {{:glfusion:editor:leftjustifiy.png|}}  |Left justify text | +
-|JustifyCenter  |  {{:glfusion:editor:centerjustify.png|}}  |Center justify text | +
-|JustifyRight  |  {{:glfusion:editor:rightjustify.png|}}  |Right justify text  | +
-|JustifyFull  |  {{:glfusion:editor:blockjustify.png|  }}   |Full justification of text | +
-|Link  |  {{:glfusion:editor:insertlink.png|}}  |Insert a hyperlink  | +
-|Unlink  |  {{:glfusion:editor:removelink.png|}}  |Remove link from highlighted text  | +
-|Anchor  |  {{:glfusion:editor:anchor.png|}}  |Insert an HTML anchor  | +
-|Image  |  {{:glfusion:editor:image.png|}}  |Insert or upload an image  | +
-|MediaGallery  |  {{:glfusion:editor:mediagallery.png|}}  |Insert a Media Gallery auto tag  | +
-|Video  |  {{:glfusion:editor:video.png|}}  |Insert an embedded video (from YouTube or other video hosting sites)  | +
-|Flash  |  {{:glfusion:editor:flash.png|}}  |Insert a Flash video  | +
-|Table  |  {{:glfusion:editor:table.png|}}  |Insert a table  | +
-|Rule  |  {{:glfusion:editor:hr.png|}}  |Insert a horizontal rule  | +
-|Smiley  |  {{:glfusion:editor:smiley.png|}}  |Insert a smiley face icon  | +
-|SpecialChar  |  {{:glfusion:editor:specialcharacter.png|}}  |Insert a special character  | +
-|PageBreak  |  {{:glfusion:editor:pagebreak.png|}}  |Insert a page break  | +
-|Style  |  {{:glfusion:editor:style.png|}}  |Select from a set of pre-configured styles (from theme stylesheet)  | +
-|FontFormat  |  {{:glfusion:editor:format.png|}}  |Select the font attribute   | +
-|FontName  |  {{:glfusion:editor:font.png|}}  |Select font family  | +
-|FontSize  |  {{:glfusion:editor:size.png|}}  |Select font size  | +
-|TextColor  |  {{:glfusion:editor:textcolor.png|}}  |Select the text color  | +
-|BGColor  |  {{:glfusion:editor:backgroundcolor.png|}}  |Select the background color | +
-|FitWindow  |  {{:glfusion:editor:fullscreen.png|}}  |Expand editor window to full screen  | +
-|ShowBlocks  |  {{:glfusion:editor:showblocks.png|}}  |Mark the blocks in the document (shows content divs - not related to the glFusion block system | +
-|About  |  {{:glfusion:editor:about.png|}}  |About FCKeditor  | +
- +
-====== Toolbar Bands ====== +
  
-Every ToolBarSet is composed of a series of "toolbar bands" that are grouped in the final toolbar layoutThe bands items move together on new rows when resizing the editor.+===== CKEditor Configuration ===== 
 +The main CKEditor configuration file is located in the public_html/ckeditor/ directory and is called config.js.  This is where the 2 default toolbars are defined.
  
 +Each edit operation (i.e.; enter a story, enter a comment, etc.) has a template file (located in private/plugins/ckeditor/templates) that controls the CKEditor functions for that operation.
  
-As you can see in the above toolbarsets definitionsevery toolbar band is defined as separated JavaScript array of strings. Every string corresponds to an available toolbar item defined in the editor code or in a pluginIf the toolbar item doesn't exista message is displayed when loading the editor.+For examplewhen entering story, the ckeditor_story.thtml template is used. In this template, is the configuration for the operation of entering a story In this example, the following line:
  
 +                     toolbar: 'standard',
 +                     
 +defines which tool bar to use for this operation.
  
-You can also include a separator in the toolbar band by including the "-" string on it.+You can completely override the standard configuration and define a new tool bar Here is an example from the Forum plugin's CKEditor template:
  
-====== Forcing Row Break ======+        function loadEditor(id) { 
 +            var instance CKEDITOR.replace( id, { 
 +            toolbar: [ 
 +            { name: 'document', items: [ 'Source' ] }, 
 +            [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ], 
 +            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] }, 
 +            { name: 'forum', items : [ 'Smiley','NumberedList', 'BulletedList', 'Image','SpecialChar' ] }, 
 +            ], 
 +                contentsCss: '{site_url}/css.php?t={theme}', 
 +                bodyClass: 'forumpost', 
 +                removePlugins: 'elementspath', 
 +                resize_enabled: false, 
 +             } ); 
 +             return instance; 
 +        }
  
 +In this example, we define a new toolbar, with the specific menu items we want for the Forum plugin.
  
-Looking at the "Default" ToolBarSet you will note that in one of the rows you have a "/" string instead of an array. This slash can be used to tell the editor that you want to force the next bands to be rendered in a new row and not following the previous one.  
glfusion/editor.1266467519.txt.gz · Last modified: 2010/02/18 04:31 by Mark
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3