Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
rgibson1
Community Champion

Modify Rich Text Editor

Jump to solution

Has anyone modified the Rich Text Editor in order to force LTI apps onto the primary toolbars? We find that the "V" submenu link is completely unintuitive for locating three critical LTI add-ins. I can't tell you how many times we've directed people to the "V", which they had no idea existed. We would like to force these add-ins onto the primary toolbar and perhaps move lesser used items (like sub and superscript) to "V".

1 Solution
Chris_Hofer
Community Coach
Community Coach

Hi rgibson1​...

My understanding (and this is what I recall seeing quite a while back from someone here in the Community) about the "V" icon is that the items within that menu are all based on the order of the LTI apps that you add to your account/course.  So, if you add several LTIs at the account level, it's entirely possible that a given course may have more LTIs within the "V" menu because certain LTIs can only be added at the course level.  Therefore, it's going to be different at each school (and maybe each course) depending on what LTI was added first, second, third, etc.

I know this doesn't really answer your question, but I did find an archived Feature Idea, , that didn't get lots of votes.  Maybe it's time to re-submit this idea to see if it gets more votes this time around?  You never know...people's priorities can change.

Finally, one thing that we do is create a "public" course that only our instructors know about (we place a link to the course in our "Help" menu.  The "Resources" courses has a bunch of stuff...including all LTIs that we have enabled at the account level.  For each LTI that we've enabled, we have a page in the course dedicated to that LTI with information, videos, and instructions on how to add it to a course.  These instructions include screen shots (including the "V" menu) on how to add a LTI to a course.  That might be something to consider, too.

Hope this helps, Rob!

View solution in original post

7 Replies
Chris_Hofer
Community Coach
Community Coach

Hi rgibson1​...

My understanding (and this is what I recall seeing quite a while back from someone here in the Community) about the "V" icon is that the items within that menu are all based on the order of the LTI apps that you add to your account/course.  So, if you add several LTIs at the account level, it's entirely possible that a given course may have more LTIs within the "V" menu because certain LTIs can only be added at the course level.  Therefore, it's going to be different at each school (and maybe each course) depending on what LTI was added first, second, third, etc.

I know this doesn't really answer your question, but I did find an archived Feature Idea, , that didn't get lots of votes.  Maybe it's time to re-submit this idea to see if it gets more votes this time around?  You never know...people's priorities can change.

Finally, one thing that we do is create a "public" course that only our instructors know about (we place a link to the course in our "Help" menu.  The "Resources" courses has a bunch of stuff...including all LTIs that we have enabled at the account level.  For each LTI that we've enabled, we have a page in the course dedicated to that LTI with information, videos, and instructions on how to add it to a course.  These instructions include screen shots (including the "V" menu) on how to add a LTI to a course.  That might be something to consider, too.

Hope this helps, Rob!

Dang. I wish I would have known about this vote...

James
Community Champion

rgibson1,

Here's some additional information that you may or may not be able to use. I added some LTIs to my toolbar just so I could see what was going on.

This is the Rich Content Editor that I get when I go to add a quiz question.

226483_pastedImage_1.png

As you can see, there are two LTI icons and the additional tool icon (the V).

Here's another quiz question about 10 seconds later.

226487_pastedImage_2.png

Notice that there are four icons, which is all that I had installed, but it's still 4.

So, what did I do.

There are two environment variables that Canvas shares with us that provide some information about what is going on. One is ENV and the other is INST. ENV contains a lot of information, INST doesn't contain as much.

One thing that INST does have is maxVisibleEditorButtons and it defaults to 3.

I know it looks like it only showed 2, but it actually showed 3 buttons. 2 were for the LTI tools and the 3rd one was the V for additional tools.

What I typed in the console on the browser's Developer Tools was

INST.maxVisibleEditorButtons=4;

When I added the next question, it recognized that there were now 4 spaces available and since I only had 4, it showed me all of them and didn't need the V for additional tools.

Note that changing this variable will not impact Rich Content Editor windows that are already open -- which may cause potential issues with editing Content Pages.

There's another property of the INST variable ... editorButtons. It's an array that contains the order that the LTI icons should appear in.  Here's what that currently looks like:

[ {
  "name" : "Graph Builder",
  "id" : 154190,
  "url" : "https://www.edu-apps.org/tool_redirect?id=graph_builder",
  "icon_url" : "https://www.edu-apps.org/tools/graph_builder/icon.png",
  "canvas_icon_class" : null,
  "width" : 475,
  "height" : 770
}, {
  "name" : "Twitter Feed",
  "id" : 160790,
  "url" : "https://www.edu-apps.org/twitter_lti/",
  "icon_url" : "https://www.edu-apps.org/assets/inst_lti_twitter/icon.png",
  "canvas_icon_class" : null,
  "width" : 475,
  "height" : 490
}, {
  "name" : "Insert Math Equation - WIRIS editor",
  "id" : 319205,
  "url" : "https://www.wiris.net/instructure.com/canvas/editor/dialog",
  "icon_url" : "https://www.wiris.net/instructure.com/canvas/editor/icon.gif",
  "canvas_icon_class" : null,
  "width" : 570,
  "height" : 450
}, {
  "name" : "Public Resources",
  "id" : 319206,
  "url" : "https://www.edu-apps.org/lti_public_resources",
  "icon_url" : "https://www.edu-apps.org/assets/lti_public_resources/public_resources_icon.png",
  "canvas_icon_class" : null,
  "width" : 560,
  "height" : 600
} ];

Notice that the first two are "Graph Builder" and "Twitter Feed" and those are the two that show up by default.

Let's say that you wanted the order to be: Public Resource, WIRIS, Twitter, and then Graph Builder.

We need to sort the data and it's going to need to be a custom sort. You can sort by ID, but if the tools are added at the course level, those would change. I'm not sure about the account level since I don't have any added there. A potentially more usable form would be to sort by name.

Here's some example code to do that.

function iconSort(a, b) {
  var aPos = sortOrder.indexOf(a.name);
  var bPos = sortOrder.indexOf(b.name);
  var order;
  if (aPos === bPos) {
    order = 0;
  } else if (aPos > -1 && bPos > -1) {
    order = aPos > bPos ? 1 : -1;
  } else {
    order = aPos > -1 ? -1 : 1;
  }
  return order;
}

var sortOrder = [ 'Public Resources', 'Insert Math Equation - WIRIS editor', 'Twitter Feed', 'Graph Builder' ];
INST.editorButtons.sort(iconSort);

This sorts the icons into the desired order. The last else makes sure that LTI icons that are missing from the list get placed after those that are specified in the list, so you don't have to worry about instructors adding their own -- this will force them into the proper order.

Here's what I get if I leave the INST.maxVisibleEditorButtons at the default value of 3 but run the code to sort the icons.

226489_pastedImage_5.png

Here's what it looks like if I set the number of buttons to 4.

226490_pastedImage_7.png

And here's what it looks like if I remove Wiris from the sortOrder array.

var sortOrder = [ 'Public Resources', 'Twitter Feed', 'Graph Builder' ];
INST.editorButtons.sort(iconSort);

226491_pastedImage_8.png

This could be added to the custom JavaScript or made part of a user script so it runs under Tampermonkey or Greasemonkey. You'll probably want to combine them into an immediate invoked function expression to limit the scope of the variables and keep them from polluting the global space. Perhaps something like this.

(function() {
  'use strict';
 
  var sortOrder = [ 'Public Resources', 'Insert Math Equation - WIRIS editor', 'Twitter Feed', 'Graph Builder' ];
  INST.editorButtons.sort(iconSort);
  INST.maxVisibleEditorButtons = 4;

  function iconSort(a, b) {
    var aPos = sortOrder.indexOf(a.name);
    var bPos = sortOrder.indexOf(b.name);
    var order;
    if (aPos === bPos) {
      order = 0;
    } else if (aPos > -1 && bPos > -1) {
      order = aPos > bPos ? 1 : -1;
    } else {
      order = aPos > -1 ? -1 : 1;
    }
    return order;
  }

})();

If I add it through a script manager, it runs as soon as the document is loaded and it seems to be fast enough that it fixes the buttons when editing a quiz or content page, where the Rich Content Editor comes up as soon as the page loads. I was worried about timing issues, but this script is very short and quick, while loading the content takes longer.

However there's no guarantee with the custom JavaScript that it will run as soon as the page is loaded. In fact, Canvas has said that jQuery will be ready before they run our custom JavaScript, and even though this page doesn't use jQuery, it's not going to get ran until jQuery is available. This means that there might be an issue where the editor would load with the old order of the icons before the script runs to change the order of the icons. This is conjecture, I haven't actually tested it.

If the editor loads before you can get the order changed, the next step is probably to look at the TinyMCE editor itself. I've not gotten far with that in the past, but there are some other stalled features we could make happen if we could figure it out.

I hope this helps.

wlopez
Community Member

I'm not sure if it's a TinyMCE editor thing or a Canvas API thing, but in my opinion the "unintuitiveness" comes from the "V" icon itself--it would make much more sense if it looked more like a drop-down menu, with the uniform solid black downward triangle...why not a descriptive word like "More" or an icon of a "Tool" with the black drop-triangle. No?

Perfect, thanks!