Sitecore RTE: a custom button does not trigger a dialog

Question

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");
}

Answer 1

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.