Experience manager Gui extensions, insert text into a field rather than replace

Question

I am currently trying to write a GUI extension to insert some html into a component, I have managed to get it working correctly in the content manager but am struggling to get it to work in experience manager.

I have read the question How to pass data from custom Popup to currently selected text editor in Tridion UI 2012 (SiteEdit)? and can now get it to overwrite the data. However is there a method of just inserting the data rather than replacing it completely?

$context = $display.getView();
if ($context.getId() == "ComponentView") {
    target.editor.applyHTML(functionData);
}
else
{
    $selection = $display.getView().getSelectionWithFieldData();
    $fieldData = $selection.properties.fieldData
    $item = $models.getItem($selection.getItems()[0]);
    $context.applyFieldValue($item, $fieldData.xpath, functionData, $context);
}

Is there a method in Anguilla that can replicate applyHTML in experience manager or will I need to insert the next html into the old code in my code and then replace the lot?

Also where is best to look for resources on Anguilla functions? I have downloaded the "SDL Tridion 2013 SP1 GUI Extensions API zip" but it's not the easiest to use as it has 10,000 odd html pages with no search functionality.

Thanks for looking!

Answer 1

You probably need to look through InlineFormatArea.js and the Format Area Action commands (executeFAAction)

You'll see that when in XM the necessary functions are called cross domain using the $xdm object. You will see functions such as

• this.applyBold
• this.applyItalic
• this.applyHTML

the former two call off to applyTagFeature whilst the the latter, you're using, simply receives a string of HTML (iStrHTML) so this is clearly by design.

If you want to use one of the other applyXXX functions then Anguilla will already take care of the 'selected object' being passed (cross domain) to these functions.

So, for example, you could create a button to Add Bold and Italic and maybe check if you can use something along the lines of

var view = $display.getView();
if (view && view.executeFAAction) {
    view.executeFAAction("applyBold", []);
    view.executeFAAction("applyItalics", []);

    view.executeFAAction("$xdm.applyCommandExecute", []);
}

caveat that I've not tested this because the first command may cause the selectedObject to change The above example will work as you call the command once. If you tried to call each format option individually then (aside from being a nonsense in making two round-trips) you'd be relying on the end effect of the applyTagFeature not resetting your selected RTF content.

If, however, you want to create your own function such as applyMyCtaFormat then your options are

• add applyMyCtaFormat to the file above (note this is core file - updating this directly will likely void support and complicate updates - but will let you update this pretty quickly)
• append the function via namespace manipulation to the same file - this will require another extension method to append/integrate your file (along the lines of this puppy http://tridion.uibeardcore.com/2014/02/js-overwriting/ ... or probably a little neater is this [search for MONKEY PATCHING _BUILDNEWLINKHTML] from Alex Klok: http://codedweapon.com/2014/08/customizing-an-existing-tridion-popup-dialog/)

Answer 2

Eventually managed to get around to looking into Dylan's answer, which was excellent and helped a tremendous amount. So thank you very much for that. However it turned out there was a simple way of doing this upon inspecting the \WebUI\Editors\SiteEdit\Scripts\Commands\FormatArea.js and insert table function.

Basically you can just replace:

$selection = $display.getView().getSelectionWithFieldData();
$fieldData = $selection.properties.fieldData
$item = $models.getItem($selection.getItems()[0]);
$context.applyFieldValue($item, $fieldData.xpath, functionData, $context);

With the following:

var view = $display.getView();
if (view && view.executeFAAction)
{                                   
    view.executeFAAction("applyHTML", [functionData]);
    view.executeFAAction("$xdm.applyCommandExecute", []);
}

Where function data is the text you wanted to replace. Dylan's answer would have been perfect if I wanted to extend on this but all I needed to do was hook into the paste functionality. Hope this helps someone else who may have the same problem.