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

HTML Formatter

HTML Formatter

(3)
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:

76120_UnformattedHTML.jpgUnformattedHTML.jpg

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:

76391_formattedHTML.jpgformattedHTML.jpg

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) 

58 Comments
Beth_Young
Community Contributor

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. Smiley Happy

kmeeusen
Community Coach
Community Coach

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
Community Champion

This definitely has my vote when it opens up!

buellj
Community Contributor

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
Community Participant

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
Community Participant

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.

 @chofer ​, 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
Community Champion

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
Community Participant

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

josh_emmitt
Community Contributor

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
Instructure
Instructure

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

chofer
Community Coach
Community Coach

I think that's exactly why I submitted this Feature Idea.  I would love to be able to see properly formatted HTML code right on the page (HTML view) without having to work in some other editor first, copy/paste the code back into the HTML side of the RCE...taking the "middle man" out of the equation.

dlyons
Instructure
Instructure

I misunderstood this feature request; I was thinking you wanted to be able to share code as content on the page, and you meant you want the HTML view to be formatted for you as the creator. I get it now. 🙂

chofer
Community Coach
Community Coach

ok...yeah.  Sorry if the feature idea wasn't clear.  Yes, as I am building a page in a Canvas course or making edits to the page in question, it would be so beneficial for us to be able to see properly formatted HTML.

csalazar
Instructure
Instructure

This would be a great enhancement for the many teachers and instructional designers that edit the HTML to take full advantage of customizations to the look and feel of pages. Our ability to deliver this in the next six months would depend on us finding a tool that could be integrated into TinyMCE.

I will start doing some research into our options and will update the thread with what I find.

Thank you,

Cosme

kona
Community Coach
Community Coach

Thanks for the update!

hensonj
Community Participant

our ability to "take full advantage of customizations to the look and feel of pages" is hindered much more by the ultra restrictive valid elements list for tinymce (as well as canvas's own scrubbing code) that removes globally accepted tags from the code. please see this feature idea for more information:

TINY MCE

James

chofer
Community Coach
Community Coach

Thank you, Deactivated user​!  Seems like I've created a lot of interest with this, so I hope it is something that will eventually become a reality in Canvas!!!

kpthomps
Community Member

I agree that the ability to add HTML comments in the HTML editor view of Pages is really important; along with maintaining the whitespace/indentation of the markup code. Color coding the tags and attributes would be icing on the cake. Hope this moves forward!

willmccrary
Community Member

Resurrecting the thread to say that a more full-featured HTML editor would be super useful.  Just having something like color-coding and tab stops would be wonderful.

peterakers
Community Participant

I'd be interested in an update on where this is at? As others have said it would be a welcome enhancement