4

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:

enter image description here

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?

4

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. enter image description here I was able to display my custom dialog (changed title) and after I clicked Insert I was able to hit the js breakpoint .

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.