Canvas HTML Editor (Tips and Code)

jnassif · ‎05-24-2017

Before I start with my blog, I want to give credit to Huston Hall from Eastern Washington University. His online post inspired me to do this.

I wanted to create this blog because I did a lot of online research and could not find everything I needed in one place. I was looking to improve the over all quality of my canvas page design as well as adding new feature to my pages. There are a lot of different tutorials online on how to include different HTML elements into your canvas page, but I will be sharing with you here everything I have gathered as well as some tricks on how to make the process easier. I created a canvas resource that is available publicly on Canvas. To access this resource: (Click Here).

If you have any questions, please email me:

John Nassif

jnassif@llu.edu

James · ‎05-24-2017

@jnassif , Thanks for throwing this together and making it available to people.

A word of warning about tabs and accordions and anything else that uses the enhanceable_content class. Canvas has said they are going to stop providing the jQuery-UI library used to create those and that people are going to have to put in their own libraries to make it work. They've also said it's a ways down the line.

Although the response was framed within the context of enhanceable_content, it would presumably affect other jQuery-UI things like the progress bar.

I didn't see it on your site, but you might consider linking to the Canvas StyleGuide, which has some of the same information and some other as well. Unfortunately, it's not been updated to reflect the jQuery-UI deprecation and still recommends people use it.

Renee_Carney · ‎05-24-2017

Thank you for posting this @jnassif ‌.

I'm going to move it to the https://community.canvaslms.com/groups/designers?sr=search&searchId=819a6e20-f237-4ff9-8039-715ed7e8...‌ group where it has a better fit!

lalesi · ‎05-25-2017

Thank you for pulling these resources together. I am planning to share it with my teachers.

Linda

cohenf · ‎05-25-2017

I'm impressed, @jnassif ‌. I've bookmarked this. Thank you!

Cc: tomtullio‌

carmen_vallis · ‎05-25-2017

thanks James, any idea when jQuery-UI is going to be deprecated???

Nancy_Webb_CCSF · ‎05-30-2017

Love having this code in one place, thanks @jnassif ‌!

And thanks @James ‌ for alerting us to the coming loss of jQuery-UI.

James · ‎05-30-2017

Not completely sure, but Erin Hallmark has said there's going to be some deprecation of accordions announced in the June 12 Beta Release Notes. She also says Ryan Shaw provided a solution, which is basically to duplicate what Canvas currently does. I'm also not sure if that's happening for everything jQuery-UI or just accordions. If it's everything jQuery-UI, I'm going to have to rework a bunch of my Canvancements sooner rather than later.

I haven't looked into whether or not Ryan's solution will work or not. There's a part of me that worries about timing issues and the need to install mutation observers to make sure it's ready before acting on them. Canvas knows when the page is ready and can make these calls, but I've done enough work on adding things to pages that part of me that worries whether it will be an issue for us. I hope I'm just being overly cautious and paranoid.

Ryan has said that jQuery-UI is big and expensive to load, but we're going to need to load it if we repeat what Canvas has been doing so there's no real gain for those who are using the enhanced content unless we can find smaller libraries that accomplish the same thing. It would be awesome if someone who knows what they're doing to step in and recommend an alternative JavaScript library and then everyone could standardize on that (maybe backbone? I'm out of my expert zone here so I'm not even sure if that's an option).