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) 

[allison]

I was just looking at the Tiny MCE 4.2 upgrade and didn't see any indentation or formatting helpers there. I've asked our awesome engineers to look for alternative approaches that would work well with Tiny. I'll comment on this thread when I hear back!

[kmeeusen]

Great Allison!

I know that when you are on the scent of something, you won't loose the trail!

Let us know.

KLM

[James]

What you're finding matches what I found when I looked at those last month. I investigated finding a way to allow users to add their own add-ins to TinyMCE and found that many useful ones (like source code formatting) have been deprecated over the years or there just isn't a plugin for it.

[willmccrary]

I have a related idea going in another thread.  It's a relatively small thing, but it wastes a surprising amount of time:

Basically: When I'm doing some intensive editing in a course, it can be a pain to have to hunt down my original position in the HTML editor whenever I switch over to the Rich Content Editor. The cursor seems to jump around to random places without rhyme or reason when I go back and forth. It would be great if the cursor location in both editors could be tied together, so there's no question where you are in a long document.

Have a look if this drives you as crazy as it does me!

Will

[hensonj]

workaround:

type a series of one letter like"sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss".

its easy to see in the html editor. Just delete it when your done.

James

[kmeeusen]

I usually hit enter a bunch of times, then when I go to the HTML Editor I can find four five or more lines of non-breaking spaces. Then, of course, I just delete them.

[xcotto]

Notepad++ will be a perfect option for this HTML editor

[ronmarx]

An iteration of reverse function DOES work when toggling back and forth from the HTML editor.  The cursor position in the HTML-E is preserved when the RTE is toggled to see the effects of the code change. Creating a cursor position in the RTE might be useful, especially when using Kennethware or CIDI Labs Design Tools—then the part inspector would be in the precise, relevant position.

Keep your eyes open for a commenting suggestion from me. Developers need that!

Cheers,

iRon_Mrx

[ronmarx]

Fleshing out the HTML editor to function more like a basic editing tool (like the seminal BBEdit or Jonathan Deutch's HyperEdit--for us Mac users), would be great and I won't look a gift horse in the mouth if Instructure wants to incorporate the full functionality of a lightweight editing tool. Maybe, however, we need a baby step toward best practice coding which is sorely lacking in Canvas: HTML commenting!

I've been searching for an idea suggestion related to this: revising the Canvas HTML code editor to allow comments using standard HTML comment tag: <!-- coder's comments go here -->

Comments written like this are current stripped out of the HTML when the RTE is toggled and the element is saved, WHY? I don't have a degree in software engineering, but I know enough to realize and appreciate the utility of being able to comment code, especially in an open source environment!

I was surprised to notice this when I got started with Canvas, and even more surprised that it hasn't been suggested here in CC. Rest assured, I'll be adding an idea suggestion for this feature very soon.

Cheers,

iRon_Mrx

[hensonj]

 @ronmarx ​

"Comments written like this are current stripped out of the HTML when the RTE is toggled and the element is saved, WHY? I don't have a degree in software engineering, but I know enough to realize and appreciate the utility of being able to comment code, especially in an open source environment!"

There are two reasons this is happening...

The first is TinyMCE's white list. It is incredibly restrictive, as is the second reason; Canvas's own "scrubbing" code which removes any tags  or characters it deems unacceptable.
These make it incredibly difficult to create engaging content. I personally am a fan not of linking a bunch of boring documents to a page but making the pages themselves interactive and displaying the content directly there. It's frustrating to deal with the restrictions placed on us and the inability to change it. That being said, self-hosted instances CAN make the necessary changes but instances hosted by canvas cannot due to the way canvas uses these files per a group of hosted instances (or so I'm told) and not on a school by school basis.

James