AnsweredAssumed Answered

Image preview in WCM TinyMCE function

Question asked by mlathe on Aug 18, 2009
Latest reply on Aug 19, 2009 by scottf
Hi all,
I'm trying to get images to be previewable inside of the TinyMCE editor when editing xml documents in the WCM web form functionality.

By default TinyMCE is enhanced with the implementation of the "alfresco_TinyMCE_urlconverter_callback" JS function in "scripts/ajax/tiny_mce_wcm_extensions.js". Unfortunately it relies on the the Virtualization Server being booted.

My idea is to instead just use the "downloadContent" Servlet way of accessing content. ie
/alfresco/d/d/avm/FOO–admin/-1;www;avm_webapps;ROOT;static;icons;topics;40x40_foo.gif/40x40_foo.gif
for images like
/static/icons/topics/40x40_foo.gif

So i made a function to map and another to unmap the ImageURLs between the ugly downloadContent type request and the nice version that is needed when saving.

var _foo_tokens = alfresco.constants.AVM_WEBAPP_URL.split('.');
var _foo_web_project_user = _foo_tokens[1]; // should be like "admin"
var _foo_web_project_name = _foo_tokens[2]; // should be like "FOO"
var FOO_URL_PREFIX = alfresco.constants.WEBAPP_CONTEXT + "/d/d/avm/" +
                        _foo_web_project_name + "–" + _foo_web_project_user +
                        "/-1;www;avm_webapps;ROOT";
//////////////////////////////

function foo_mapImageURL(href) {
  var result;
  if (href && href.startsWith("/") && !href.startsWith(FOO_URL_PREFIX)) {
    result = FOO_URL_PREFIX;
    result += href.replace(/\//g, ";"); + "/";
    result += href.substring(href.lastIndexOf("/"));
  } else {
    result = href;
  }
  return result;
}

function foo_unmapImageURL(href) {
  var result;
  if (href && href.startsWith(FOO_URL_PREFIX)) {
      result = href.substring(FOO_URL_PREFIX.length);
      result = result.substring(0, result.lastIndexOf("/"));
      result = result.replace(/;/g, "/");
  } else {
      result = href;
  }
  return result;
}


//based on the alfresco_TinyMCE_urlconverter_callback() in scripts/ajax/tiny_mce_wcm_extensions.js
function foo_TinyMCE_urlconverter_callback(href, element, onsave, attrib_name)
{
  var result = null;
if (onsave)
  {
    result = (href && href.startsWith(FOO_URL_PREFIX)
              ? foo_unmapImageURL(href)
              : foo_mapImageURL(href));
  }
  else
  {
    result = (href && href.startsWith("/")
              ? foo_mapImageURL(href)
              : href);
  }

  if (href && href.startsWith(document.location.href))
  {
    result = href.substring(document.location.href.length);
  }

  // handle URL issue with IE (WCM-1134)
  if (tinyMCE.isMSIE)
  {
     var server = document.location.protocol + "//" + document.location.host;
     if (href && href.startsWith(server))
     {
        result = href.substring(server.length);
     }
  }

  return result;
}

Then i register the new callback in the xforms.js TinyMCE settings section:

alfresco.constants.TINY_MCE_DEFAULT_SETTINGS =
{

  [b]urlconverter_callback: "foo_TinyMCE_urlconverter_callback",[/b]
  file_browser_callback: "alfresco_TinyMCE_file_browser_callback"
};

I also made some ugly hacks in the xforms.js since you need to map the URL during the xform widget load, and unmap them when Alf is trying to get the data out.



              ////////////////////////////////////////////////////////////
              //// FOO::: need to override to get image preview to work
              ////////////////////////////////////////////////////////////
//               img.setAttribute("src", alfresco.constants.AVM_WEBAPP_URL + img.getAttribute("src"));
              img.setAttribute("src", foo_mapImageURL(img.getAttribute("src")))
              ////////////////////////////////////////////////////////////
              //// FOO::: end of override
              ////////////////////////////////////////////////////////////

    ////////////////////////////////////////////////////////////
    //// FOO::: need to override to get image preview to work
    ////////////////////////////////////////////////////////////
//     result = result.replace(new RegExp(alfresco.constants.AVM_WEBAPP_URL, "g"), "");
    var tokens = result.split('"');
    for (var i=0; i<tokens.length; i++) {
        tokens[i] = foo_unmapImageURL(tokens[i]);
    }
    result = tokens.join('"');
    ////////////////////////////////////////////////////////////
    //// FOO::: end of override
    ////////////////////////////////////////////////////////////


Everything works great, until you edit a document, change an image using the popup editor, then try to edit the same image again. The second time, the image source is not unmapped and shows up as /alfresco/d/d/avm/FOO–admin/…

Any idea what is going wrong? One curious item is what the "on_save" parameter is used for. Since this seems to be exactly what is needed. As far as i can tell no one really knows what it is used for (http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=58464#p58464), in fact if you go through the TinyMCE code you'll see that it is always set to true, yet the Alfresco code seems to expect that it is false sometimes. Any idea when this is set to false?

Thanks
–Matthias

Outcomes