5

I'm adding a new custom button to Sitecore Rich Text Editor which should enable a user to add a triggerable modal to RTE content. I haven't found a case quite like that when researching, but there is plenty of references which describe adding a custom button to RTE and I've closely followed this one.

What I have done so far:

  • created a new button in the core db for my html editor profile with InsertModal as a click action
  • created InsertModal folder in /sitecore/shell/controls/rich text editor/
  • created InsertModal Commands.js, InsertModal.js and InsertModal.xml in this folder following the instruction's examples and changing the name where applicable
  • created a class to reflect the CodeBehind reference in the .xml and published the dll
  • added this to one of my config files:

    <clientscripts>
      <htmleditor>
        <script src="sitecore\shell\Controls\Rich Text Editor\InsertModal\InsertModal Commands.js" language="JavaScript"/>
      </htmleditor>
    </clientscripts>
    

As a result, I'm able to see my dialog if I open it via /sitecore/shell/default.aspx?xmlcontrol=RichText.InsertModal&la=en&sc_lang=en link, but if I try to click the custom button in the RTE itself, nothing happens and there is an error in the console: Uncaught ReferenceError: InsertModal is not defined.

I'm able to see my custom config referring to InsertModal Commands.js in /sitecore/admin/ShowConfig.aspx. Same error happens when I move the Telerik.Web.UI.Editor.CommandList["InsertModal"]= function <...> piece of code from InsertModal Commands.js to RichText Commands.js. I've tried refreshing Sitecore cash, but there's no improvement the code behaviour. Anyone has an idea on what I'm doing wrong? Thanks!

Edit: Here's what InsertModal Commands.js contains:

var scEditor = null;
var scTool = null;

Telerik.Web.UI.Editor.CommandList["InsertModal"]= function(commandName, editor, args) {
    scEditor = editor;

    editor.showExternalDialog(
       "/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertModal&la=" + scLanguage,
       null, //argument
       500,
       400,
       scInsertModal, //callback
       null, // callback args
       "Insert Modal",
       true, //modal
       Telerik.Web.UI.WindowBehaviors.Close, // behaviors
       false, //showStatusBar
       false //showTitleBar
   );
};

function scInsertModal(sender, dialogInfo) {
   if (!dialogInfo) {
       return;
   }

   var placeholderHtml = "<hr class=\"dialog-placeholder\" style=\"width: 100px; display: inline-block; height: 20px;border: blue 4px solid;\""
                    + "data-dialogContentItemId=\"" + dialogInfo.dialogContentItemId +"\" "
                    + "title=\"Dialog Content Path: " + dialogInfo.dialogContentItemPath + "\" />";

   scEditor.pasteHtml(placeholderHtml, "DocumentManager");
}
  • Can you also add the contents of InsertModal Commands.js? – Teeknow Aug 7 '17 at 16:56
  • @Teeknow Yes! added it to the end of the question body – Elena P Aug 7 '17 at 20:22
  • 1
    I ended up trying the linked example and it ended up opening a dialog. The version I was using was Sitecore.NET 8.2 rev. 170614. Does it say what file the error is occurring in in dev tools (i.e. screencast.com/t/jRfKDded)? – Teeknow Aug 7 '17 at 22:23
  • 1
    @Teeknow thanks so much for trying that out. And your question actually did put me on the right direction to find out what's wrong, turns out I created a WebEdit Button instead of proper Html Editor button :( – Elena P Aug 8 '17 at 8:35
  • glad to hear you got it working :) – Teeknow Aug 8 '17 at 13:13
0

Turns out I created a WebEdit button instead of Html Editor Button, this is why understandibly any of the button id's from Telerik.Web.UI.Editor.CommandList couldn't be triggered. After I created a correct type of button and placed it under Toolbar 1 everything works as expected.

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.