5

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!

9

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

  • Thanks for this I will have a play this afternoon to see if I can get this working! – Matt Hill Apr 20 '15 at 11:52
  • Please do keep us posted with the results and ideally your reason for selecting the option you do (e.g. technical excellence 'v' business timing etc.) – Dylan .. Mark Saunders Apr 20 '15 at 13:14
  • Thanks again for your post. Was looking into your answer when I found the code that I have used in my answer. The post was much appreciated though and has helped a lot with finding the solution. – Matt Hill Apr 30 '15 at 16:30
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.