HTML Formatter

[Chris_Hofer]

On the "HTML Editor" side of content pages, I would like to be able to click on a button to format (indent) the HTML code so it displays properly rather than having everything left-aligned.  For example, in a Canvas page, HTML code looks like this:

However...using a program like Adobe Dreamweaver or a website like Format HTML for Free, the code is easier to decipher...as in this example:

As an added bonus, it would be awesome if the code could also be color-coded (as in this example).  This helps me easier figure out where I might have to add code to a page if the need arises.

This idea has been developed and deployed to Canvas

For more information, please read through the Canvas Release Notes (2021-02-20) 

[Beth_Young]

A formatted, color-coded html view would also help those of us faculty who are only slightly proficient in html, but who need to make minor changes in the html view. It's a lot easier to look at the formatted html and figure out which parts to leave alone.

[kmeeusen]

I would vote for this. As a beginning coder, I would be better able to read and parse the scripts if indents were in place.

[canvas_admin]

This definitely has my vote when it opens up!

[buellj]

Great idea. I am thinking that there are any number of open source 3rd party HTML editors that could be integrated with Canvas to fulfill this ask.

[AJC17246]

I think Instructure still uses the third-party editor TinyMCE for Canvas's Rich Text boxes. If so, any feature requests will depend on what TinyMCE offers or might be convinced to offer, or on Instructure switching vendors.

When I find myself doing editing that's a little beyond what I can do in the Canvas HTML editor I usually copy the material to a different HTML editor and then copy back when I'm done. But that's not ideal if you want to be able to monitor the live view as you go.

[hensonj]

Yes AJC17246​, its tinymce.  We finally got canvas to update to the "new" editor just before moving to the new community, but even still we don't have a full featured copy. We're missing things ranging from print and preview to extensions that enable external CSS to be loaded. While I understand that these are not things that your average user will encounter daily, or perhaps ever, using basic valid HTML and CSS are essential to creating truly innovative and engaging content. I like to think we're all big kids here and can handle the ability to use every bit of functionality we can get our hands on, so why remove these? Anyone not interested can stick to copy and paste, or as instructors commonly do, call me and ask if I can copy and paste for them.

 @Chris_Hofer ​, great idea! I looked around at tinymce's documentation again and dont see any obvious way to do this but who knows! I personally do all my edits in Dreamweaver, paste them into the editor and see how much gets destroyed by the laughably small number of valid elements. Which also leads me to this...

For anyone here voting or commenting on this I would like to shine some light on another great resource (for which there was a feature request that has since been relegated to the great and magical feature request graveyard) its aim was to expand the ability of those who dare to use HTML mode, by expanding the number of valid elements accepted by tinymce. This single step, of uploading an expanded valid elements list (a txt file) would allow the editor to act in a manner that would allow any of the amazing things you can do in web design to be used IN canvas. No workarounds, no bs. Just think of the possibilities! CSS3 transitions, <video> elements, dare I suggest <script> tags!!!!!!!!. Anyway, here are the relevant links.

Please join our fellow Canvas users in making Canvas more awesome

You cant vote any more, but you can comment, and we can tell Canvas with BOTH of these feature requests that people who travel bravely into the HTML editor, like traveling to the deep end of a shallow pool, are people too!

[James]

hensonj​,

Regarding adding tags to TinyMCE, it's not as easy as you make it out to be (just add a text file). The sanitizing is hard-coded into a gem used: canvas-lms/canvas_sanitize.rb​

This means that even if you enable it in TinyMCE that it won't get stored into the page by Canvas. I noticed it when trying to bypass the editor by creating content using the API.

However, it may be possible to get the formatting done by injecting Javascript onto the page. I've written a couple of blog posts this week about it and the HTML formatting was on my radar, but I decided to go to bed at 3:00 this morning since I had to teach.

[hensonj]

I hadn't noticed the redundancy there, thanks for pointing that out!

[josh_emmitt]

This would also be good if it meant you could leave a html comment tag. Especially when you are trying to make a html page and share with with people who don't know html.

[dlyons]

There is a discussion related to this where I pointed folks to some free LTIs you can install today to work with code in the RCE. Please see it here: Re: Pasting Code Into A Page