Recently, I have come up with an idea to Customize Rich Text Editor in Sitecore by adding a button that embeds GIPHY player into my content. So, I thought that I will share this with you. I was pretty sure that this will be a quick and easy change… right. It actually requires quite a lot of “Sitecore corners” to explore :P. Ok, so let’s start…

Customize Rich Text Editor

Firstly, we have to create an Item that will represent our Button. Go to /sitecore/system/Settings/Html Editor Profiles in Core database. This folder contains Rich Text Editor’s profiles which you can change by setting HtmlEditor.DefaultProfile. This setting can be found in Sitecore.config and by default is set to Rich Text Default. 

New button

New RTE button.

Inside Rich Text Default profile, I added my Button and assigned InsertGiphyPlayer as my custom command which will be triggered when the button is clicked.

Defining custom UI

The second step is to add XML file which will define the UI, code-behind which handles the request and triggers JavaScript functions. As a template for my implementation, I used InsertImage and InsertLink defined in ~\Website\sitecore\shell\Controls\Rich Text Editor folder.

<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
  <RichText.InsertGiphyPlayer>
    <FormDialog Icon="Business/32x32/message.png" Header="Insert a GIPHY Player" Text="Paste URL." OKButton="Insert player">

      <script Type="text/javascript" src="/sitecore/shell/Controls/Rich Text Editor/InsertGiphyPlayer/InsertGiphyPlayer.js">.</script>

      <CodeBeside Type="SitecoreKickOff.Controls.InsertGiphyPlayerForm, SitecoreKickOff" />

      <Border class="scInsertImageFileName">
        <GridPanel class="scFormTable" Columns="2">
          <Literal Text="URL:"/>

          <Edit ID="Filename" />
        </GridPanel>
      </Border>
      <Border def:placeholder="Buttons">
        <Button ID="BtnUpload" style="display:none;" Header="Upload" Click="media:upload(edit=1,load=1)"/>
      </Border>
    </FormDialog>
  </RichText.InsertGiphyPlayer>
</control>
function GetDialogArguments() {
    return getRadWindow().ClientParameters;
}

function getRadWindow() {
    if (window.radWindow) {
        return window.radWindow;
    }

    if (window.frameElement && window.frameElement.radWindow) {
        return window.frameElement.radWindow;
    }

    return null;
}

var isRadWindow = true;

var radWindow = getRadWindow();

if (radWindow) {
    if (window.dialogArguments) {
        radWindow.Window = window;
    }
}

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

    getRadWindow().close(returnValue);

}

function scCancel() {
    getRadWindow().close();
}

if (window.focus && Prototype.Browser.Gecko) {
    window.focus();
}

In order to check how to define custom code-behind for my dialog, I used dotPeek to decompile Sitecore’s DLL. You can find it in Sitecore.Client.dll file under Sitecore.Shell.Controls.RADEditor namespace.

Decompiled Sitecore library.

Decompiled Sitecore library.

 

using Sitecore;
using Sitecore.Diagnostics;
using Sitecore.Web;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Pages;
using Sitecore.Web.UI.Sheer;
using System;

namespace SitecoreKickOff.Controls
{
    public class InsertGiphyPlayerForm : DialogForm
        {
            protected Edit Filename;

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

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

            protected override void OnLoad(EventArgs e)
            {
                Assert.ArgumentNotNull((object)e, nameof(e));
                base.OnLoad(e);
                if (Context.ClientPage.IsEvent)
                    return;
                this.Mode = WebUtil.GetQueryString("mo");
            }

            protected override void OnOK(object sender, EventArgs args)
            {
                Assert.ArgumentNotNull(sender, nameof(sender));
                Assert.ArgumentNotNull((object)args, nameof(args));
                string giphyUrl = this.Filename.Value;
                if (giphyUrl.Length == 0)
                {
                    SheerResponse.Alert("Insert GIPHY embed URL.");
                }
                else
                {
                    if (this.Mode == "webedit")
                    {
                        SheerResponse.SetDialogValue(StringUtil.EscapeJavascriptString(giphyUrl));
                        base.OnOK(sender, args);
                    }
                    else
                        SheerResponse.Eval("scClose(" + StringUtil.EscapeJavascriptString(giphyUrl) + ")");
                }
            }
    }
}

Register custom command

As the last let to Customize Rich Text Editor, we have to register the custom command in RichText Commands.js file which is located under ~\Website\sitecore\shell\Controls\Rich Text Editor folder.

I added this piece of code to existing RichText Commands.js file.

Telerik.Web.UI.Editor.CommandList["InsertGiphyPlayer"] = function (commandName, editor, args) {
    scEditor = editor;
    editor.showExternalDialog(
      "/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertGiphyPlayer&la=" + scLanguage,
      null, //argument
      400,
      400,
      scInsertGiphyPlayer,
      null,
      "Insert GIPHY Player",
      true, //modal
      Telerik.Web.UI.WindowBehaviors.Close, // behaviors
      false, //showStatusBar
      false //showTitleBar
    );
};

function scInsertGiphyPlayer(sender, input) {
    if (!input) {
        return;
    }

    var playerHtml = "<iframe src="" + input.url + """ +
                     " width="480" height="197" frameBorder="0" class="giphy-embed"" +
                     " allowFullScreen></iframe>";
    scEditor.pasteHtml(playerHtml);
}

That should be it, now when you open Rich Text Editor you will be able to add GIPHY embed code and it will be wrapped with iframe.

Custom dialog.

Custom dialog.

 

Jobs done

Jobs done:)

That’s all for today I hope it was helpful and see you next time.

Categories: sitecore

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

meetup

SUGPL Meetup Warsaw – Video Presentation

Video presentation SUGPL Meetup Warsaw – 23 March 2018 In my last post, I have invited you all to a SUGPL Meetup Warsaw which took place on 23 March 2018. I have been one of the presenters. Read more…

meetup

SUGPL Meetup Warsaw – 23 March 2018

SUGPL Meetup Warsaw This gonna be a short post but I would like to invite you all to a SUGPL Meetup Warsaw which takes place on 23 March 2018. I will be there and I will Read more…

datasource

Autogenerated relative datasource location

Autogenerated relative datasource location An easy way to create autogenerated relative datasource location which increases the flexibility of your components and some tricks to workaround one issue. A new component At the beginning, we have Read more…