cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

add custom class to RCE CANVAS LMS

Hey, I have been looking now for a while but can someone give me some code example how to add some custom classes into the RCE menu.  I would like to extend the Rich Content Editor bar with some custom CSS classes which have been put into the theme editor. It would be nice to provide some easy dropydown button or expand the current Format selector.  rather dan telling a user how to edit the page in editor view. I found some great CSS stuff but providing this to the end-user would be nice. 

9 Replies
Highlighted
Community Advocate
Community Advocate

Without offering any code (because it was written by a former coworker, and so far I just test it every 3 weeks)

I don't have time to unwrap and explain it. The RCE is using TinyMCE, which has the ability to add plugins.

You can start here

TinyMCE | Custom Toolbar Button 

TinyMCE | Custom Toolbar Listbox 

Highlighted
Community Member

Hi Robert,

Thnks for the reaction. I did find this before. I was looking for an example on how to Implementate this on a proper way. adding javascript this way with the links you provide I was not getting any results. 

Highlighted

hasan.yildirim@hu.nl

Later this week, or early next week I can try unwrapping our code and putting it up here as an example. I won't say anything about it being the 'proper' way, just the way it works for us, pre-discussion, in our tiny incubator, once I share it there's bound to be discourse. :smileygrin:

I have a few pressing things to situate this week that I've been neglecting. Let me catch up and I'll see what we can do.

Just to be clear...

Do you have admin permissions to the Canvas Themes Editor, global JavaScript?

Are you trying to do this in a user script?

Highlighted
Community Member

Hi Hasan,

 

I work with carroll-ccsd, and he had me take a look at some of the code we have for updating the RCE to see if I could help you out.  Since the RCE was built using TinyMCE, that really does seem like our best option for the task, but I had to dig into it and play around with some sample code before I got the hang of it.  Here are some examples and tips that I hope will be useful.

 

Using the sample code below, you can add a button to the RCE toolbar.  The button lets the user add a horizontal rule.

(function() {
    if (typeof tinymce !== "undefined") {
        try {
            var addHRButton = function() {

                var button = tinymce.ui.Factory
                .create({
                    type: "button",
                    icon: "hr",
                })
                .on("click", function() {
                    tinymce.execCommand("InsertHorizontalRule", !1);
                });

                var bar = tinymce.editors[0].theme.panel.find("toolbar buttongroup");
                bar[1].append(button);
            }
            addHRButton();
        } catch(err) {
            console.log("TinyMCE not found");
        }
    }
})();

 

If you go into your Chrome Developer console and add this code while you are on a page with the RCE, it should add the horizontal rule button.  (When entering the developer console, do not right click on the actual content of the RCE editor, because it is in an iframe that does not recognize the tinymce object.)

 

This, and all of the TinyMCE functionality starts with the tinymce object (which you can also access in the console).

 

Amazingly, you can create your own local RCE using this code from TinyMCE:

<!DOCTYPE html>

<html>

<head>

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

  <script>tinymce.init({ selector:'textarea' });</script>

</head>

<body>

  <textarea>Next, use our Get Started docs to setup Tiny!</textarea>

</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

This is awesome because it gives you an instant little RCE that you can play around with and get a feel for the API.  https://www.tiny.cloud/docs/api/

 

As you probably already know, if you want to edit the CSS in Canvas, including the RCE, you have to do it through the global CSS Theme file.  However, this CSS does not always pull over into the RCE preview display, and you need to perform another step to ensure that the CSS shows up there.  We do this by injecting it directly.  This takes several steps that we execute via our global JavaScript file, in which we:

 

  • Put the link for our global CSS file into a variable called customCSS.
  • Inject the CSS links into the editor via the TinyMCE dom.loadCSS method:
tinymce.editors[0].dom.loadCSS(customCSS);‍‍

Yeah, it’s more complex than I would like, but as far as I can tell, it’s the best methodology given the constraints of Canvas.

 

Bruce S.

Highlighted

Bruce,

I should be able to run this as a userscript, right?

v/r
 MJH

Highlighted

Just tried pasting this into a UserScript and it was not successful. We can play with it a bit and see what it requires.

Highlighted

O WoW Bruce !! , thanks that helped a lot. I am struggling now on the part how to add the custom CSS . 
But I hope to get this clear at the end of the week. 

I want to share the following idea:  
As you probably know, the RCE editor had the option if you use the ALT-F9 button to show the editors toolbar. 
This give me the idea of expanding the Format  , like i found on: TinyMCE | Custom Formats Example 

So users can make usage of CSS that is already there. 

Since I already uploaden a custom CSS into CANVAS , 
I only want to use some of the classes I have defined here.  
this will give the users to use some of the custom classes we have created. 

 

Highlighted

Awesome Hasan,

Let us know how it goes.

Highlighted

Hi Mike,

I was able to get the horizontal rule button to work in Tampermonkey with a few tweaks.

In Tampermonkey itself, I had to add an @include statement like this:

   // @include      https://*instructure.com/courses/*

My @namespace and @match have the same url as well.

Of course, if you want to prevent this from running in parts of the courses section, you can always use @exclude to do so.

The code for the user script looks like this:

(function() {
    'use strict';

    var timerCount = 0;

    function addHRButton () {
        // Make sure that RCE has loaded and that an HR button isn't already in place
        if (typeof tinymce !== "undefined" && $(".mce-i-hr").length === 0) {
            var button = tinymce.ui.Factory
            .create({
                type: "button",
                icon: "hr",
            })
            .on("click", function() {
                tinymce.execCommand("InsertHorizontalRule", !1);
            });

            var bar = tinymce.editors[0].theme.panel.find("toolbar buttongroup");
            bar[1].append(button);
        }
    }

    function waitForElement(elementId, callBack){
        window.setTimeout(function(){
            var element = document.getElementById(elementId);
            timerCount ++;
            if(element){
                callBack(elementId, element);
            } else {
                if (timerCount > 800) {
                    console.log('RCE not found');
                    return;
                }
                waitForElement(elementId, callBack);
            }
        },30)
    }

    waitForElement("wiki_page_body_ifr", addHRButton);

})();

I think the main reason this wasn't working as a user script is that it takes awhile for tinymce to load.  So I added a timer function that runs for about 30 seconds to make sure that the RCE is available before adding the button.

Bruce