Adding custom buttons to atkFckAttribute

ATK Howto: Adding custom buttons to atkFckAttribute

Complexity: Advanced
Author: Jeroen van Sluijs <jeroenvs@achievo.org>

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);

</javascript>

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/');

</javascript>

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

Fckeditor wiki

Additional information can be found on the fckeditor wiki.