Using Aegir image pop-up with MidCOM

1. Setting up Aegir
1. Sitegrouped Aegir host
2. Configuring widget_html

As MidCOM has no native way of uploading and inserting images into content areas of Datamanager's WYSIWYG editor widget, the image pop-up of Aegir can be used instead.

Setting up Aegir

To use the Aegir pop-up on the MidCOM site, the two systems must single sign-on which each other. If you're using the default NemeinAuthentication setup of MidCOM template, this is easily done by creating a sitegrouped Aegir host prefixed with /aegir into same domain name as the actual site.

Sitegrouped Aegir host

If you're using some other authentication method, like Basic authentication or NTLM, you must patch Aegir using some external instructions.

Configuring widget_html

Next you need to tell the HTMLAREA widget to actually utilize the image pop-up. To do this, create snippet /sitegroup-config/midcom.helper.datamanager.widget_html/config under your sitegroup.

Here is an example config snippet:

<?php

$nav = new midcom_helper_nav($GLOBALS["view_contentmgr"]->viewdata["context"]);
$leaf_id = $nav->get_current_leaf();
if ($leaf_id) {
  $leaf = $nav->get_leaf($leaf_id);
  $leaf_object = mgd_get_object_by_guid($leaf[MIDCOM_NAV_GUID]);
  $target_id = $leaf_object->id;
  $target_type = $leaf_object->__table__;
} else {
  $node = $nav->get_node($nav->get_current_node());
  $node_object = mgd_get_object_by_guid($node[MIDCOM_NAV_GUID]);
  $target_id = $node_object->id;
  $target_type = "topic";
}

        $result = <<<EOF

// FIELD {$this->_fieldname} HTMLAREA init script START
var {$this->_fieldname} = null;

function {$this->_fieldname}_init() {

    if (!document.getElementById("{$this->_fieldname}")) {
        return;
    }

    config = new HTMLArea.Config();
    config.bodyStyle = "background-color: #fff;";
    config.statusBar = false;
    config.formatblock = {
        "Heading 2": "h2",
        "Heading 3": "h3",
        "Normal": "p",
        "Formatted": "pre"
    };

   config.registerButton("insertimage2", "Insert image", "/midcom-static/midcom.helper.datamanager/htmlarea/images/ed_image.gif", false,
      function(editor, id) {

        chooser = window.open("/aegir/rcs/image/popup/?type=$target_type&id=$target_id&htmlarea=Y&hostid=", "chooser","height=450,width=400,modal=yes");
        chooser.ifield = editor;

      }
    );

    config.toolbar = [!!
    [!! "formatblock", "bold", "italic", "underline", "superscript", "separator",
      "justifyleft", "justifycenter", "justifyright", "separator",
      "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator",
      "inserthorizontalrule", "createlink", "insertimage2", "inserttable", "htmlmode","popupeditor"]
    ];

    {$this->_customconfig}
    {$this->_fieldname} = new HTMLArea("{$this->_fieldname}",config);
    {$this->_fieldname}.registerPlugin("ContextMenu");
    {$this->_fieldname}.registerPlugin("TableOperations");
    {$this->_fieldname}.generate();
};

// FIELD {$this->_fieldname} HTMLAREA init script END

EOF;
?>