Media Gallery Media Browser FCKeditor Plugin - version 1.5.1

Author: Mark R. Evans mark@gllabs.org
Date: March 12, 2008

Media Gallery Media Browser is a plugin for the FCKeditor that is included with Geeklog v1.4.1. This plugin will allow you to easily insert Media Gallery auto tags into your stories and static pages. Once installed, simply press the MG button on your editor toolbar to open the Media Browser. Select the type of auto tag, attribute and the media item, press INSERT and the auto tag will be placed in the editor window.

mgMedia Browser was developed using Geeklog v1.4.1 and Media Gallery v1.4.8. It may work with earlier versions of both Geeklog and Media Gallery. If using an earlier release of Geeklog, the installation instructions for adding the MG icon to the FCKeditor toolbars may not be accurate. You will need to find the proper files that define the menus and perform the edits on those files.

Media Gallery Media Browser FCKeditor Plugin - version 1.5.1

Unarchive or FTP mbmediabrowser-1.5.1.zip to the following directory public_html/fckeditor/editor/plugins/ This should create a new directory under the plugins/ directory called mediagallery/

Edit public_html/fckeditor/fckconfig.js

Around line 77 add
FCKConfig.Plugins.Add('mediagallery');

While editing fckconfig.js, add the Media Galler Media Browser icon to the “Default” FCKeditor toolbar. Find the toolbar, it will begin with FCKConfig.ToolbarSets[“Default”] = [
Add 'mediagallery' after the 'Image' button, so your toolbar will look like this:

 
  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'],
    ['Smiley','SpecialChar','PageBreak','UniversalKey'], ['TextColor','BGColor'],
    ['Image','mediagallery','Flash','Table','Rule'],
    '/',
    ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
    ['OrderedList','UnorderedList','-','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['Link','Unlink','Anchor'],['FitWindow','-','About'],
    '/',
    ['Style','FontFormat','FontName','FontSize']
  ] ;    
  

Edit public_html/fckeditor/myconfig.js

You will want to add the mgMedia Browser Icon to all the standard Geeklog FCKeditor toolbars:

I prefer to add 'mediagallery' right after the existing 'Image' button.

If you add the mgMedia Browser button to toolbar1, it will look something like this:

  FCKConfig.ToolbarSets["editor-toolbar1"] = [
    ['Source','-','Undo','Redo','-','Link','Unlink','-','Bold','Italic',
    '-','JustifyLeft','JustifyCenter','JustifyRight','mediagallery',
    '-','OrderedList','UnorderedList','Outdent','Indent','FitWindow','About']
  ] ;

For the “editor-toolbar2” and “editor-toolbar3” you can add the mgMediaBrowser button after the 'Image' button. Your new toolbars will look like this:

  FCKConfig.ToolbarSets["editor-toolbar2"] = [
    ['Source','-','Undo','Redo','-','Link','Unlink','-','Bold','Italic','Underline','StrikeThrough',
    '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull',
    '-','OrderedList','UnorderedList','Outdent','Indent'],
    ['PasteText','PasteWord','-','FontName','FontSize','TextColor','BGColor','-','Rule','-','Image','mediagallery','Table','FitWindow','-','About']
  ] ;

  FCKConfig.ToolbarSets["editor-toolbar3"] = [
      ['Source','Templates','-','Cut','Copy','Paste','PasteText','PasteWord','-',
      'Find','Replace','-','Undo','Redo','-','RemoveFormat','-','Link','Unlink','-',
      'Image','mediagallery','SpecialChar','-','Print','SpellCheck','FitWindow'],
      ['Table','Rule','Bold','Italic','Underline','StrikeThrough','-',
      'Subscript','Superscript','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-',
      'OrderedList','UnorderedList','-','Outdent','Indent','-','TextColor','BGColor','-','About'],
      ['Style','-','FontFormat','-','FontName','-','FontSize']
  ] ;	

Save the file and you are done!

You can set the default values for the auto tags by editing the values in the public_html/fckeditor/editor/plugins/mediagallery/config.php file.

Fire up your story editor using the Advanced Editor and look for the new MG toolbar button. Click on the button and the Media Browser window will pop-up. Select the type of auto tag to add, set the auto tag attributes and finally select a media item, press INSERT and you should have an auto tag automatically inserted into your editor window.