Allow Custom CSS in Editor

Idea created by James Wallerstedt on May 18, 2019
    Open for Voting
    Score2

    I have always thought calling the Canvas editor a "rich content editor" a bit bold since it really is a minimal editor vis a vis the creation of online courseware. It's as good as most forum editors and its simplicity and reliability are appreciated. However, it needs to at least allow inserting custom CSS to work around various formatting limitations. As is, it strips out custom CSS placed in pages that would otherwise create a superior result.

     

    An example is that I have a PDF on a page with 16 slides discussed in a video posted above it. Below it, I want to list the start times for discussion of each slide. I do not want that to be a single 16 line long one-column list because that's a waste of horizontal and vertical space. I want it to be 4x, 3x or 2x columns, automatically adjusting based upon the viewport of the student's device (ie: regular computer vs. smartphone).

     

    As is, the only side-by-side layout option in the "rich content editor" involves HTML Tables. HTML Tables are a clunky and outdated method for creating grid and column content, inferior to several alternatives that now exist, including the CSS Grid and Flex modules and the use of CSS Columns.

     

    I decided to use the latter to quickly accomplish what cannot be done nearly as well with Tables, by bracketing the otherwise 16 vertically-stacked lines of text with a DIV tag like <div style="columns:4 150px">. What that simple code accomplishes is that 4 columns will now appear under the PDF on a regular computer display while, on a smartphone, the presentation will automatically adjust to fewer columns as needed.

     

    The screenshot below shows what the page looked like when I switched from "HTML editor" back to "rich content editor" having inserted the custom CSS. Having 3 vs. 1 columns is a big improvement, which would become 4 columns once the page is saved and reloaded. However, there was a "sad trombone sound" moment once the page was saved and reloaded, as the 2nd screenshot shows. This is happening because, in saving the page, a routine needlessly stripped out "prohibited code," removing the custom CSS (confirmed by subsequently checking the page source code). 

     

    Many of us know how to write inline CSS. In terms of worries about screwing up page appearance, any who use the "HTML editor" can already do that, yet it is of vital importance to allow source code editing of pages to work around various glitches and limitations the "rich content editor" has. Please allow the insertion of custom CSS.