Tags

, , , , , , ,

The Rich Text Editor in Sitecore is equipped with a lot of buttons, but not with a button to insert iframes in the page. Some clients, however, use iframes in their websites, but it is too risky to let them edit the HTML itself. So what we need is a custom button in the Sitecore Rich Text Editor.

Insert Iframe


This excellent post by Mark Stiles explains step-by-step how to insert a custom button in the Rich Text Editor: http://www.markstiles.net/Blog/2012/02/17/adding-button-to-rich-text-editor-in-sitecore-6-4.aspx. These steps are:

  • Add a new __Html Editor Button item to the Sitecore tree in de Core database, under a Html Editor Toolbar item of choice.
  • Provide a function name in the field “Click” of the __Html Editor Button item (for instance “InsertIframe”).
  • Register this function (with the same name “InsertIframe”)in the file “/sitecore/shell/Controls/Rich Text Editor/RichText Commands.js” in your solution.
  • Add a new .js file to your solution that contains the functions for opening and closing the RadWindow that allows the user to insert iframes in the Rich Text Editor.
  • Add a new .xml file to your solution that contains the interface of your RadWindow.
  • Add a new .cs file to your solution that contains the logic for actually inserting the iframe into the Rich Text Editor.

These steps have all been described in detail in Mark Stiles’s post. Now let’s edit the last two steps in order to have a fully functioning InsertIframe button.
First, let’s edit the .xml file in order to have a input field for the URL, the Height and the Width of the iframe:

<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
	<RichText.InsertIframe>
		<FormDialog Icon="applications/32x32/fit_to_size.png" 
			Header="Insert an iframe" 
			Text="Insert the iframe code to include in the page." 
			OKButton="Insert">
		<script Type="text/javascript" 
			Language="javascript" 
			Src="Controls/Rich Text Editor/InsertIframe/InsertIframe.js">.</script>
		<CodeBeside 											Type="MyWebsite.InsertIframe, MyWebsite"/>
		<GridPanel Width="450px" 
			Height="40px" Style="table-layout:fixed">
		URL: 
		<Memo ID="memCode" 									Style="height:40px; width:450px; border-radius:5px; border-color:#919b9c;" ></Memo>
		</GridPanel>
		<GridPanel Width="450px" 
			Height="20px" 
			Style="table-layout:fixed">
		Height: 
		<Memo ID="memHeight" 
			Style="height:20px; width:450px; border-radius:5px; border-color:#919b9c;" ></Memo>
		</GridPanel>
		<GridPanel Width="450px" Height="20px" Style="table-layout:fixed
		Width: 
		<Memo ID="memWidth" 
			Style="height:20px; width:450px; border-radius:5px; border-color:#919b9c;" ></Memo>
		</GridPanel>
		</FormDialog>
	</RichText.InsertIframe>
</control>

Then, let’s edit the code in de .cs file in order to construct the iframe tag. In the .xml file we have declared three Memo controls. These will be attributed a default value in the OnLoad() method of the control. Then we override the OnOK() method, that is when the user has pressed OK in the Dialog. We use a string.Format() method to insert the values of our Memo controls into the iframe tag. This code is then passed to the SheerResponse, and the rest of the code is left unchanged.

public class InsertIframe : Sitecore.Web.UI.Pages.DialogForm
{
	// Fields
	protected Sitecore.Web.UI.HtmlControls.Memo memUrl;
	protected Sitecore.Web.UI.HtmlControls.Memo memHeight;
	protected Sitecore.Web.UI.HtmlControls.Memo memWidth;

	//setup page
	protected override void OnLoad(EventArgs e)
	{
		Assert.ArgumentNotNull(e, "e");
		base.OnLoad(e);
		if (!Context.ClientPage.IsEvent)
		{
			this.Mode = WebUtil.GetQueryString("mo");

			// default values for height and width of the Iframe
			memHeight.Value = "800";
			memWidth.Value = "614";
		}
	}

	//pressed ok
	protected override void OnOK(object sender, EventArgs args)
	{
		Assert.ArgumentNotNull(sender, "sender");
		Assert.ArgumentNotNull(args, "args");

		string iframeTag= string.Format("", memUrl.Value, memHeight.Value, memWidth.Value);

		//encode it and send it back to the rich text editor
		if (this.Mode == "webedit")
		{
			SheerResponse.SetDialogValue(StringUtil.EscapeJavascriptString(iframeTag));
			base.OnOK(sender, args);
		}
		else
		{
			SheerResponse.Eval("scClose(" + StringUtil.EscapeJavascriptString(iframeTag) + ")");
		}
	}

	//cancelled
	protected override void OnCancel(object sender, EventArgs args)
	{
		Assert.ArgumentNotNull(sender, "sender");
		Assert.ArgumentNotNull(args, "args");
		if (this.Mode == "webedit")
		{
			base.OnCancel(sender, args);
		}
		else
		{
			SheerResponse.Eval("scCancel()");
		}
	}

	// Properties
	protected string Mode
	{
		get
		{
			string str = StringUtil.GetString(base.ServerProperties["Mode"]);
			if (!string.IsNullOrEmpty(str))
			{
				return str;
			}
			return "shell";
		}
		set
		{
			Assert.ArgumentNotNull(value, "value");
			base.ServerProperties["Mode"] = value;
		}
	}
}
Advertisements