How to make TinyMCE Responsive

How to make TinyMCE Responsive

Rick Jerz -
Колькасьць адказаў: 1
Выява Particularly helpful Moodlers Выява Testers

In my testing of TinyMCE, I learned that it doesn't completely resize itself as the width of a browser is narrowed. I did some searching about how to make TinyMCE "responsive", found some good information, but don't know how to apply this to my MORE theme as CSS.  Could someone help?

Here is what I found on one webpage.

/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {width:100%!important;}

3down vote

There is a way to get the toolbars to wrap on smaller screens.

/* make the toolbar wrap */
.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}
Сярэдняе рэйтынгаў: -
У адказ на Rick Jerz

Re: How to make TinyMCE Responsive

Mauno Korpelainen -

You can test such css with Custom Css box in the settings of More theme (in administration menu). If you add there the css from that jsFiddle example

 table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}

@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
    
    .mceToolbar td {
        display:table-cell;
        float: none;
    }
    mceToolbar td:nth-of-type(11){
        clear: none;
    }
}

toolbars get wrapped (responsive) according to screen width but it's not very ideal solution because you get easily a long row of buttons that fill small screen phones... You can see the effect better in previous versions of moodle like moodle 2.5 with for example Essential theme (and smaller buttons in tinymce toolbar/old o2k7 skin)

That css wraps toolbar rows if screen (window) width is less than 600px and keeps the toolbars at 600px if screen (window) width is more than 600px. I think core moodle developers did implement some wrapping already (wrap plugin?) to tinymce before they started to develop Atto (default editor of moodle 2.7) but nobody tried to create actual responsive skins or mobile themes for tinymce since core moodle developers decided to drop support for working with tinymce.

Сярэдняе рэйтынгаў: -