cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
gmorris1
Community Participant

NEW RCE - Need to add custom buttons

Jump to solution

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?

0 Kudos
1 Solution

Accepted Solutions
gmorris1
Community Participant

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/

 

 

View solution in original post

4 Replies
gmorris1
Community Participant

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
Instructure
Instructure

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
Community Participant

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
Community Participant

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/

 

 

View solution in original post