[ARCHIVED] NEW RCE - Need to add custom buttons

[gmorris1]

In the old RCE, we used the Custom JS File in the Canvas Theme Editor to add normal tinymce command to implement custom buttons to the Rich Content Editor. We added functions, such as Insert Embed Code without going into the HTML Edit View, A one click button to add a Custom Calendar to a page, and many other functions.

When the new RCE was forced on us, our Custom Buttons disappeared. We are looking for any documentation on adding custom buttons to the new rce.

Any advice out there?
What Rich Content Editor are they using now?
Is it a new/custom version of tinymce? Or something else?

[gmorris1]

Also, Instructure Support referred me to this link: https://www.tiny.cloud/docs-4x/advanced/creating-a-custom-button/?gclid=CjwKCAjw4qCKBhAVEiwAkTYsPB2m...

But that is the same link I used when I created the Custom Buttons for the old RCE.
Now, with the new RCE, when using that same code, the developer toolbar displays the error "tinymce not defined."

[dlyons]

Hello, @gmorris1!

The supported way to add buttons to the RCE is with an LTI using the "Editor Button Placement". Integrations of this type are officially supported which means we maintain compatibility across changes, and communicate if a breaking change is coming. It may be possible to modify your custom JavaScript to alter the RCE in a similar way as you were doing previously, but I recommend going the supported route for stability.

You may not need to re-create the embed code functionality though, as the RCE supports adding embed codes without switching to the HTML view.

[gmorris1]

Thanks, I read about using the LTI Method. But I could not find a way to make a button show up on the toolbar, without clicking the Tools -> Apps Menu. We need the button to be available as one click, on the toolbar. We try very hard to reduce the number clicks and the amount of nested menus the Teachers have to sift through to find the options they need.

Also, on the new insert embed code option of the new RCE, there are too many steps. It is a step in the right direction, but just as I said above, we want EASY and EFFICIENT. With the our custom button, the user clicks inside the Rich Editor where they want the content to appear and then click our custom button and it inserts the embed code they already copied into their system clipboard. Our Staff LOVES THIS!!

I already got our Custom Button added back for the Insert Embed code. If you have access to our instance, please have a look at it to see how easy it works.
Now that I figured our hot to get our Custom Buttons added back, I am working on adding the rest of our custom buttons. Out Custom JS File needs completely changed.

Also, if you know of a way to use the LTI Placement option, and make the icon show up as a Button on the tool bar, and not as a sub menu under the Tools -> Apps menu, could you please provide a link to that documentation? I have looked and could not find a way to do it. But it is possible that I overlooked it 😕

Thanks for your reply!

[gmorris1 · Accepted solution]

I figured it out... There is a lot different with the latest version of TinyMCE.

The following links helped me figure out why our custom buttons were not working, there was some dialogue options that broke the config because of deprecated code.:

https://www.tiny.cloud/docs/ui-components/dialog/

https://www.tiny.cloud/docs/ui-components/dialogcomponents/

[DeletedUser]

@gmorris1 ,

Would you mind sharing what you did to create the custom button? I've also been trying without any luck, and it looks like what you've done is exactly what I'm looking for. I'm looking to create a button where when staff click it, it takes what's in the clipboard and embeds the HTML directly in without them needing to know any coding. 

[chriscas]

Hi @DeletedUser,

I know this isn't an answer to your question, but the RCE is going to natively support drag&drop/copy&paste very soon.  Canvas had the ability enabled a few weeks ago, but there was a bug on Macs that they needed to fix, so it was turned off temporarily.  It won't be a button, just ctrl+v or drag to the RCE window, but I think it may negate the need for any development work on a separate button.

-Chris

[gmorris1]

Sorry for the delayed reply. 

Sure, I don't mind sharing 🙂

If you already got this taken care of, let me know.

But if you still want me to share, I need to ask if you are familiar with the Custom JS in Canvas?
Only ask so I know how detailed I need to be with steps.

[jhveem]

This isn't a full guide, but what I found after many many hours of experimenting. Also, if someone knows a better method, please share.

//Run in custom js. You'll want to:
////1. Filter in some way which pages this runs on, I just do a regex checking the url to see if /edit is at the end of the url.
////2. wait for the rce to be loaded and initialized. I'm still experimenting on the best way to do this so don't have any good suggestions for you.
(function() {
  //save current settings so you don't lose anything Canvas has set up
  let savedSettings = tinymce.activeEditor.settings;
  //save the setup function
  let oldSetup = savedSettings.setup;
  //create a new setup function that first calls the old one, then adds whatever button you want (or other settings)
  savedSettings.setup = function(editor) {
    //run the old setup function and pass the editor
    oldSetup(editor);
    
    //add your button or whatever else you want to do
    //this is just a sample button I pulled from the tinymce docs
    editor.ui.registry.addButton('customInsertButton', {
      text: 'My Button',
      onAction: function (_) {
        editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
      }
    });
  }
  //don't forget to add your button to the toolbar
  //you'll probably want to get more sophisticated in selecting which specific toolbar to add to rather than just the first one
  savedSettings.toolbar[0].items.push("customInsertButton");
  //get rid of the current editor
  tinymce.activeEditor.destroy();
  //reset up with modified settings
  tinymce.init(savedSettings);
})();