How to pass data from custom Popup to currently selected text editor in Tridion UI 2012 (SiteEdit)?

Question

I am successfully able to open a custom popup and pass the data from the popup to the currently selected editor in CME. But the same custom popup is not working with SiteEdit. The popup opens but the data is not getting passed to the currently selected text editor. For CME I use the below code to pass the data. Here "target" references the currently selected editor in CME.

target.editor.applyHTML(popUpData);

But the above code does not work with SiteEdit. I even tried to use the Anguilla JS as shown below:

var fb = $display.getView().properties.controls.fieldBuilder;
var field = fb.getField($display.getView().getSourceEditorName());
field.setValues([data]);

but here the fieldBuilder object is returning undefined. Does anyone have any idea how to get it work?

Answer 1

Within the SiteEdit editor, there's no such control as a field builder, but rather a set of Component Presentations and Fields, if you wan to set a value in an existing SiteEdit field (I guess within a Component Presentation where such field is editable...), first you need to make a selection, i.e. click in the field.

Here are the available controls in the editor:

$display.getView().properties

So in the image let's say I want to modify the title of my Component Presentation "Content 1" with "Awesome Title"

I guess your popup will have a trigger at some point where your "set" logic is executed. There you need this code (this might not be the right way, but does work):

You are going to need these objects: 1. The item you want to modify 2. The fieldData (current field info) 3. The new value 4. The context

I am assuming you pre-select the field you want to modify and then open your popup, right? If you do that, all you need will be in the selection object:

//Get the selection with field Data, since you are going to need it later
$selection = $display.getView().getSelectionWithFieldData();

Once you have your selection, you can get the fieldData:

$fieldData = $selection.properties.fieldData

Next, the item:

//Assuming there's only one item in the selection
$item = $models.getItem($selection.getItems()[0]);

And Finally, the context:

//The context is normally the editor you use (which in this case is the View), 
//I know, a bit confusing, but in most of the cases view == editor
$context = $display.getView();

The only remaining thing is to set the value:

$context._updateFieldValueElement($models.getItem($item), $fieldData, "Awesome Title", $context);
//This is the right method call
$context.applyFieldValue($item, $fieldData.xpath, "Awesome Title 2", $context);

Now, for your question I think you are trying to manipulate some html field, right? Here is my test:

$context.applyFieldValue($item, $fieldData.xpath, "<h2>Awesome Title 2</h2><p>Worth Trying!</p>", $context);

This works:

Note: Other file worth reviewing is: TRIDION_HOME\web\WebUI\Editors\SiteEdit\Scripts\Commands\FormatArea.js and its executeFAAction method.

Answer 2

Not sure if this witll help you, or if you still have the problem. However I had a similar problem and found the following works in 2013 SP1.

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

This seems to be the site edit direct replacement for:

target.editor.applyHTML(popUpData);