Adding custom buttons to atkFckAttribute

ATK Howto: Adding custom buttons to atkFckAttribute Complexity: Advanced Author: Jeroen van Sluijs <jeroenvs@ibuildings.nl>

List of other Howto's

This howto describes how to add custom buttons to the atkFckAttribute toolbar. When the button is pressed, a popup with a recordlist will be opened. Text from the selected record will be pasted in the WYSIWYG editor.

Custom fck-buttons

The following code needs to be implemented to create a custom button:

Fck Javascript

Create a javascript file fckplugin.js to register the related commands. This file can be placed in the /application_dir/fckplugins/Custom_button directory. Enter the following code:

FCKCommands.RegisterCommand
(
  'Custom_button',
  new FCKDialogCommand
  (
    "Custom_button",
    "Custom_button",
    FCKConfig.PluginsPath + "../../../../../dispatch.php?atknodetype=modulename.node&atkaction=selectfragment",
    900,400
  )
);
// Create the toolbar
var oCustomButtonItem = new FCKToolbarButton('Custom_button',FCKLang['DlgCustomButtonTitle']);
oCustomButtonItem.IconPath = FCKConfig.PluginsPath + "../../../../../fckplugins/Custom_button/Custom_button.gif";                                                       
FCKToolbarItems.RegisterItem('Custom_button',oCustomButtonItem);

900,400 Represents the size of the popup dialog that will be opened.

Icon

Create your own Custom_button.gif icon and add it to the fckplugins/Custom_button directory.

Define action in node

Create the selectfragment action:

   function action_selectfragment()
   {
     $this->addFlag(NF_NO_ADD|NF_READONLY);
     $adminhandler = &parent::getHandler("admin");
     $adminhandler->action_admin();
   }

Define recordActions to create a 'select and paste' button (see Custom_(record)_actions as well):

   function recordActions($record, &$actions, &$mraactions)
   {
     if ($this->m_action === "selectfragment")
     {
       $actions["insert_text"]= session_url(dispatch_url($this->atknodetype(),
                                            "insert_text",
                                            array("text"=>$record["text"])));
     }
   }

The insert_text action creates the javascript and uses a renderBox to execute this javascript for inserting text into the fck-editor. This window will not be showed, since it is immediately closed:

   function action_insert_text()
   {      
     $javascript_with_text = 'var oEditor = window.parent.InnerDialogLoaded();
                              oEditor.FCK.InsertHtml("'.str_replace("\"","\\\"",$this->m_postvars['text']).'");
                              window.parent.close();';          
     $page = &$this->getPage();
     $ui = &$this->getUi();
     $output = $ui->renderBox(array("title"=>"Insert text",
                                    "content"=>"<script language='javascript'>$javascript_with_text</script>"));
     $this->addStyle("style.css");
     $page->addContent($this->renderActionPage("insert_text", $output));
   }

Fck config file

Add the following line to: atk\attributes\fck\fckconfig.js

FCKConfig.Plugins.Add('Custom_button',null,FCKConfig.PluginsPath + '../../../../../fckplugins/');

Now, you can add your 'Custom_button' to any toolbarset in fckconfig.js.

Fckeditor wiki

Additional information can be found on the fckeditor wiki.