Adding a new button on the Sitecore rich text editor is not working

Question

I'm adding a new button to the Sitecore rich text editor. I've used this link as a reference.

What I'm trying to do is have a button just like "Insert Sitecore Media" where when I click it I can add an image, but that image I want to add some inline styling to it(not something a content author will do but something I'll get done programmatically). If anyone have done something similar let me know.

So here's what I have done:

• I have created the button on the core db with the click value as InsertFloatMedia
• Within /sitecore/shell/contros/rich text editor/ I have created a folder InsertFloatMedia
• Within that folder I copied and renamed the InsertFloatMedia.js and InsertFloatMedia.xml
• I have tried to reproduce the same xml described on the example I mentioned just changing what needed for InsertFloatMedia
• Have created a class and referenced it on the xml(this class is identical to the example)

• have changed the Rich Text Commands.js and added this:

  RadEditorCommandList["InsertFloatMedia"] = function (commandName, editor, args) {
      var d = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor);
      Telerik.Web.UI.Editor.CommandList._getDialogArguments(d, "A", editor, "DocumentManager");
  
      //Retrieve the html selected in the editor
      var html = editor.getSelectionHtml();
  
      scEditor = editor;
  
      //Call your custom dialog box
      editor.showExternalDialog(
          "/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertFloatMedia&la=" + scLanguage,
          null, //argument
          500, //Height
          180, //Width
          scInsertFloatMediaCallback, //callback
          null, // callback args
          "InsertFloatMedia",
          true, //modal
          Telerik.Web.UI.WindowBehaviors.Close, // behaviors
          false, //showStatusBar
          false //showTitleBar
      );
  };
  
  //The function called when the user close the dialog
  function scInsertFloatMediaCallback(sender, returnValue) {
      if (!returnValue) {
          return;
      }
  
      //You may retreive some code from your returnValue
  
      //For the example I add Hello and my return value in the Rich Text
      scEditor.pasteHtml("Hello " + returnValue.text, "DocumentManager");
  }
  

THE ERROR

But when I try to execute this opening the RTE and clicking on the button a blank pupup shows up. inspecting the url of the iframe it looks like this:

Based on the image I see the page is empty(look at the body tag) If I inspect the src for out of the box ones when I click, they show properly. Anyone know what I'm doing wrong?

Answer 1

I was able to reproduce it and got a solution. You are probably missing one small thing.

• Open new tab: http://domain/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertFloatImage&la=en

• Right now it will be empty.

• Located the InsertFloatImage.xml file and open it

• Make sure you have changed RichText.InsertImage node to RichText.InsertFloatImage, like this:

  <?xml version="1.0" encoding="utf-8" ?>
  <control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
      <RichText.InsertFloatImage>
          <FormDialog Header="Insert Float Media Item" Text="Navigate to or search for the image or media file that you want to insert." OKButton="Insert">
              <!--control code -->
          </FormDialog>
      </RichText.InsertFloatImage>
  </control>
  

• Restart your application (this is super important! You have to do this to clean cache in Sitecore)
• Go back to: http://domain/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertFloatImage&la=en and refresh the page.

Done.

Now you should see your custom dialog. I was able to display my custom dialog (changed title) and after I clicked Insert I was able to hit the js breakpoint .