Modify Rich Content Editor - Remove Icons

[GideonWilliams]

We have hybrid devices for staff and the Wiris Maths and Chemistry LTIs now provide amazing handwriting functionality so much that the built-in Maths Editor is redundant.

Is there anyway of removing it from the list?

Thanks

[James · Accepted solution]

If you're self-hosting, you could remove it from the list in the source code.

If you're having Instructure host your instance, then it's a bit more difficult. Using custom JavaScript would be one way.

$('[aria-label="Insert Math Equation"]').hide();‍

That sounds simple enough, but here are some problems that I anticipate or have verified.

• You need to do this on every page that loads the Rich Content Editor (RCE) and you want the item removed. That's a lot of different places, so it almost makes sense to run it on every page. However ...
• You need to wait for the button to appear on the page before you can hide it. This can be done with a Mutation Observer, but you'll have to know the right element to watch, which may or may not be the same on every page. The content id seems like a good candidate, but you'll have to watch the subtree since the button is not a direct child of it
• If the RCE is loaded inside an iframe and the iframe is delivered from a different domain (in security terms that includes the hostname) than the script running it, you may not have access to the contents of the iframe to make the change.
• This may not work on mobile.
• Removing the equation editor icon does not make other LTI tools, which may be under the V, appear. That is controlled by the INST.maxVisibleEditorButtons property, but that needs modified before the rich content editor is loaded.

This code is not thoroughly tested. I tested this code when adding a new page, when editing an existing page, when editing a quiz, and when taking a quiz with just one essay question on it. I did not test it in other places.

(function() {
    'use strict';
    var observer = new MutationObserver(function() {
        $('[aria-label="Insert Math Equation"]').hide();
    });
    var src = document.getElementById('content');
    observer.observe(src,{'childList': true, 'subtree': true});
})();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It's dumb in the sense that it tries to hide the equation editor button every time a node is added or removed from anywhere in the content of a page. The jQuery hide() command will silently fail if it's not there, but it uses a sledgehammer rather than a scalpel to accomplish it's task.

You may be able to add an observer.disconnect() inside the observer if there's no chance that Canvas will render() the page again and create a new RCE. You're probably safer to leave it without it.

Of course, you'll need to make sure that WIRIS doesn't use "Insert Math Equation" as their aria-label. If they do, you could get the first appearance.  But you may have more than one RCE on the page as well, so you'll most likely have to play around with the selectors.

It may be easier to just tell people not to use that button -- just like they probably won't use the left-to-right or right-to-left buttons.

[buellj]

This was so helpful - thanks  @James ‌! We used your code to hide the Canvas video player button and replace Kaltura's icon with the Canvas video icon:

var observer = new MutationObserver(function() {

   $(".icon-video").parent().hide(); // Hides Canvas video button

   setTimeout(function() { // After a small delay, swaps out Kaltura icon with Canvas video icon
      $('[aria-label="Embed Kaltura Media"]').children().children().removeClass('mce-ico mce-i-none').addClass('mce-ico mce-i-video icon-video su-kaltura').css('background-image' , 'none')
      }, 200);

   });
var src = document.getElementById('content');
observer.observe(src,{'childList': true, 'subtree': true});

Revised code:

// Remove Canvas video button from RTE; replace Kaltura button with Canvas video button
var observer = new MutationObserver(function() {

   $('[aria-label="Embed Kaltura Media"]').children().children().removeClass('mce-ico mce-i-none').addClass('mce-ico mce-i-video icon-video su-kaltura').css('background-image' , 'none') // Swap out Kaltura image and use Canvas video icon instead
   $("#mceu_24").children().hide(); // Hides Canvas video button

});
var src = document.getElementById('content');
observer.observe(src,{'childList': true, 'subtree': true});

[James]

Why the 0.2 s delay? That's too short for people to click on the old one and dangerous to do timing-based delays to wait for something to appear. That was the whole point of the Mutation Observer.  It might be that a Mutation Observer gets added once the first one triggers, or you might need to refine the first mutation observer to look for a specific item to be added.

There may be another approach ... at least until Canvas stops exposing the tinymce object. I was playing around the other day after another request in the Community about adding blockQuote. This needs wrapped, to make sure that the tinymce object is there, but I share the code in case it might steer someone towards an answer. Consider this a snippet rather than a solution.

tinymce.EditorManager.editors.forEach(function(editor) {
  var old_global_settings = tinymce.settings;
  var settings = editor.settings;
  settings.block_formats = settings.block_formats + ';Block Quote=blockquote';
  tinymce.settings = settings;
  tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
  tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
  tinymce.settings = old_global_settings;
});‍‍‍‍‍‍‍‍‍

It turns this:

Into this:

The settings.block_formats would need customized to what you wanted to change, but theoretically, one could reconfigure the editor to have what you wanted. Depending on what that was, you might need to load some plugins, but I tested it with the Word Count plugin, which is included.

Here is the same block as above with one additional line (the settings.plugin one on line 5);

tinymce.EditorManager.editors.forEach(function(editor) {
  var old_global_settings = tinymce.settings;
  var settings = editor.settings;
  settings.block_formats = settings.block_formats + ';Block Quote=blockquote';
  settings.plugins = settings.plugins + ' wordcount';
  tinymce.settings = settings;
  tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
  tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
  tinymce.settings = old_global_settings;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

That extra line turns this:

Into this (the red arrow is just for emphasis).

I probably should write this up in case someone finds it helpful. As is the case most of the time, I've got too many projects started and don't find the time to finish any of them.

[buellj]

I had added the 200ms delay because without the delay both buttons were disappearing. Since then, I have discovered that the Kaltura button just disappears after a few seconds on the quiz description RTE, so I'm a bit stumped. 

What we are trying to do is hide the Canvas video button, then swap out the image for the Kaltura button so that it uses the regular Canvas video icon. I'm still banging on this so will provide an update with what works. 

[buellj]

OK - revised the code and removed the 200ms delay (code visible in edited entry above). Everything seems to work (knocks on wood)...

I look forward to checking out the TinyMCE code soon. Thanks again  @James ‌!

[hasan_yildirim]

Hi James,

Dit you find any solution for this ? 

[dperpich]

Anyone have any suggestions for hiding the *whole* RTE on a given quiz -- using the original Quizzes tool? We have a quiz with 15 short answer questions and absolutely none of them need the RTE. I know that New Quizzes offers a simple-text response field, but we can't use NQ in this case because of some nagging parody issues (specifically, no "Graded Survey" option).