cancel
Showing results for 
Search instead for 
Did you mean: 
Surveyor

Keep Canvas text editor from rewriting scripting or other code inserted via 'HTML' mode?

When I add scripting to a page in Canvas via the text editor in HTML mode that code appears to have been changed by Canvas the next time I visit the page and examine the code in HTML mode.  For example, 

<iframe style="width: 100%; height: 1420px; overflow: hidden" src="https://jefferson.instructure.com/courses/110/files/7104/file_preview?annotate=0" scrolling="yes">
</iframe>

BECOMES:

<p><iframe style="width: 100%; height: 1420px; overflow: hidden;" src="https://jefferson.instructure.com/courses/110/files/7104/download" data-api-endpoint="https://jefferson.instructure.com/api/v1/courses/110/files/7104" data-api-returntype="File"></iframe></p>

How can I eliminate or minimize this behavior?

Tags (2)
5 Replies
Surveyor

Hi

Currently, this behavior is expected. However, developers during InstructureCon discussed changes to the editor. There will be a release of a new version soon -- well -- someday -- when it's ready. It'll first be available on the beta instance. Smiley Happy 

Here is a really great blog post on TinyMCE incorporated into Canvas:

https://go.tiny.cloud/blog/tinymce-teardown-inside-instructure-canvas/

As an aside, I asked developers if it was possible to add line numbers, syntax highlighting, etc. Two awesome devs talked about it, then on hack night they told me that someone in Utah was already working on changes. I'm not sure if these changes will make it to a release but it was awesome to learn. 

To help -- I keep a copy of the HTML / inline CSS in a sublime file. This allows me to have the syntax highlighting, etc. I then copy this into the Canvas backend. 

Also, if you want to keep the code, a trick is to hit save and not go back into the editor. If you go back and forth then things are changed. 

Community Coach
Community Coach

Hey lph‌...have you seen this pretty cool work-around?  HTML Editor Syntax Highlighter from cesbrandt.  I've been using it for a while now, and it works great inside of Canvas.

Hi Chris,

No. I haven't seen it but am about ready to take a look!  Thank you!

My editor won't override this functionality. I'm afraid that's just how the RCE parser/submission process works.

From my testing, I've found that when you submit a content change where you leave the HTML Editor open, it is still processed through the RCE before being sent to the Canvas backend. I could be mistaken on this exact process (there may be a secondary parser I'm unaware of). The only way I've found to actually bypass this functionality would be to submit the new HTML directly to the system, bypassing the RCE. It's certainly doable, but I wouldn't recommend it. You'd, essentially, have to replace the submission process with a custom made one, which could easily miss details in the configuration.

Is the presence of the paragraph element wrapping the `IFRAME` causing an issue?

Many thanks! 

I will explore TinyMCE and the Syntax Highlighter.  In the meantime, you may have cleared up a mystery for me: when I entered code via the HTML editor and saved the change, it did seem to result in the expected behavior when the page was subsequently rendered for the user.  

However, when I returned to the page to revisit the code via the HTML editor my original code was changed in ways that didn't seem to support the behavior I'd just witnessed on the user end.  

I haven't run any very rigorous tests of this--but if the system accepts the code provided via HTML and only changes it when one attempts to view it again, that could explain the seeming disconnect between what's seen on the rendered page and what's seen in code if it is revisited via the editor.