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.
