Image preview in WCM TinyMCE function

[mlathe]

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

[gavinc]

This "issue" has actually been fixed ready for the 3.2 Enterprise Release (not sure on release date though), we have removed the dependence on the virtualisation server and essentially done what you've attempted.

The solution is actually a lot easier, if you're comfortable with making Java code changes you can change the following line in XFormsProcessor.java

js.append(JavaScriptUtils.javaScriptEscape(AVMUtil.buildWebappUrl(AVMUtil.getCorrespondingPreviewStoreName(storeName), avmBrowseBean.getWebapp())));‍

to:

js.append(JavaScriptUtils.javaScriptEscape(fc.getExternalContext().getRequestContextPath() + "/wcs/api/path/content/avm/" +
                      AVMUtil.buildStoreWebappPath(storeName, avmWebApp).replace(":","")));‍‍

You're also right about the weirdness with "on_save" parameter, it used to be set appropriately but it seems that since TinyMCE 3.x this parameter is ALWAYS set to true!

Hope the above helps!

[scottf]

Thanks for the information Gavin.

I made the suggested change, but it still relies on the virtual server running for images to appear in the tiny mce editor.

I am using Alfresco 3.1 ENT.

I'm not asking specifically for further fixes, just letting you know that the virtual server is still required.