Skip to content
January 30, 2013 / kiranpatils

Return value from your custom dialog inside RTE

Challenge:

In last week we invested the good amount of time in investigating “How InsertSitecoreMedia returns value back to RTE?”. Basically, we need to replace InsertSitecoreMedia dialog by our dialog opened using Jquery dialog [http://jqueryui.com/dialog/]. We were successful to open our custom dialog via Jquery Dialog. But the main task of returning a value from that dialog was bit challenging! [And that’s how life should be! ” :-)].

So, basically this post cover following things:

  1. If you are planing to replace Insert Image/InsertSitecoreMedia dialog by your custom one!
  2. Returning a value from your custom insert image dialog to RTE.

Let’s go and delve in to it!

Solution:

Our first approach was to first understand how it works currently. means how Sitecore’s Insert Image dialog returns value to RTE? [Starting from Basic! — Because basic always works! and trust me, if you understand it’s basic the solution is pretty much easy —  This rule applies not only for this challenge. But any real/virtual life challenge you take!]. So, before we reach to solution. Let’s understand how it works currently?

1. Open Insert Media dialog – Sitecore uses JavaScript for achieving this, Let’s see how do they do it?!

a. Open “\Website\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js” file (Please, keep this file open we will need it in last step!)

b. Please look at the “RadEditorCommandList[“InsertSitecoreMedia”] = function(commandName, editor, args)

c. You will see following code:

RadEditorCommandList["InsertSitecoreMedia"] = function(commandName, editor, args) {
var html = editor.getSelectionHtml();
var id;

// inserted media in form of <img src="~/media/CC2393E7CA004EADB4A155BE4761086B.ashx" />
if (!id) {
id = GetMediaID(html);
}

scEditor = editor;

editor.showExternalDialog(
"/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertImage&la=" + scLanguage + (id ? "&fo=" + id : ""),
null, //argument
680,
500,
scInsertSitecoreMedia, // MOST IMP.! This is callback function which does the main task of returning value!
null,
"Insert Media",
true, //modal
Telerik.Web.UI.WindowBehaviors.Close, // behaviors
false, //showStatusBar
false //showTitleBar
);
};

2.  Return value from Insert Media dialog – Sitecore uses bit of a server-side code and JavaScript for achieving this, Let’s see how do they do it?!

a. Open “\Website\sitecore\shell\Controls\Rich Text Editor\InsertImage\InsertImage.xml” file On this page SC include the “InsertImage.js” javascript file to handle response from this page.//

b. In the CodeBeside of InsertImage.xml file in the “OnOk” or “Close” function SC calls the following functions, which sets needed values for dialog:

SheerResponse.SetDialogValue(StringUtil.EscapeJavascriptString(image.ToString()));
base.OnOK(sender, args);

c. Open /sitecore/shell/Controls/Rich Text Editor/InsertImage/InsertImage.js file. You will see following function:

function scClose(media) {
var returnValue = {
media:media
};

getRadWindow().close(returnValue);
}

Just a note : you might be wondering what is “media:media”? so, as we! Basically, media:media – this is a custom variable that will be used by the RichText Commands.js in the next step.

3. Set return value in selected region of RTE – Sitecore uses JavaScript for achieving this, Let’s see how do they do it?!

a. Open “\Website\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js” file [Same as step#1, Do you remember we discussed to keep this file open?]

b. Find “scInsertSitecoreMedia” function, you will see following code:

function scInsertSitecoreMedia(sender, returnValue) {
if (returnValue) {
scEditor.pasteHtml(returnValue.media);
}
}

Just a note: you might be wondering why “scInsertSitecoreMedia” function and how it gets called? Good question! Basically it’s callback function. See step1 function’s arguments closely! To read the values from dialog please use “returnValue.media” name.  Where “media” it is Sitecore’s custom name from last step.

Easy?! After understanding above approach it was just few steps to achieve our requirement, with slight modifications. Will just brief you it [Not writing in detail for brevity!]:

1. We modified RadEditorCommandList[“InsertSitecoreMedia”] = function(commandName, editor, args) function to open our custom dialog via Jquery dialog. In Jquery dialog we haven’t used any callback mechanism to return value instead of that we used following approach.

2. From our custom dialog we were calling our custom function declared in our custom JS. But make sure it is added in your Editor Page’s reference. Because we need scEditor object’s reference to use it’s pasteHtml method.

3. On close of your custom dialog you can call parent.SetValueAndCloseDialog function and definition of this function should do call scEditor.pasteHtml and close dialog behaviors.

4. That’s it!

Feel free to give a shout, if you face any challenge while implementing it for you! Will be happy to help you!

Good to read

Thanks to following article writes, because it helped us a lot while working on this challenge!

http://sitecoreblog.blogspot.in/2012_10_01_archive.html
http://sitecoreblog.blogspot.in/2012/10/add-custom-button-in-rich-text-editor.html
http://www.markstiles.net/~/link.aspx?_id=6567CA3084FE4EEFAD093BA4C0DCF999&_z=z
http://www.markstiles.net/Blog/2012/02/17/adding-button-to-rich-text-editor-in-sitecore-6-4.aspx

PS : Special thanks to  Ivan Sheyenko, Igor Strikov(Sitecore Support) for providing this suggestion and Devashri who did all this investigation and worked on this challenge!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: