Teaching with Moodle

Use full screen mode in Atto editor:

1. First, you need to install the Full Screen (Atto) plugin. You can find it at https://moodle.org/plugins/atto_fullscreen➚.
2. After installation, go to Site administration and navigate to Plugins > Text editors > Atto toolbar settings.
3. Scroll down to "Toolbar config" and edit an existing group by adding "fullscreen" to it. For example, you can include it in a group like "other = html, fullscreen, wiris, backcolor." Alternatively, create a new group like this: "fullscreen = fullscreen."
4. Now, you should see the fullscreen icon (four arrows) in the Atto toolbar.
5. Click on this fullscreen icon to switch between normal mode and fullscreen mode.

Use full screen mode in the TinyMCE editor:

1. If you're using the TinyMCE editor, select View / Fullscreen in the toolbar.
2. Alternatively, you can use the keyboard shortcut Ctrl + Shift + F to quickly switch between normal mode and full screen mode.
   

These steps should help you make the most of full-screen editing in both the Atto and TinyMCE editors. Enjoy your wide writing or editing experience!

Hello Mary,

... drag the bottom right hand corner to make the box larger. Actually, only the height of the input box can be increased, not the width. To resize both the height and width, we could use the following little script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    setTimeout(function() {
        if ( window.location.href.indexOf("edit") > -1 ) {
            $(".tox.tox-tinymce").css("resize","both");  // TinyMCE
            $("#id_introeditoreditable").css("resize","both");  // Atto
        }
    }, 1000);
});
</script>

But I think we can do even better by adjusting the width of different parts of the page using this other little script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    setTimeout(function() {
        if ( window.location.href.indexOf("edit") > -1 ) {
            $("#topofscroll").removeClass("main-inner");
            $(".col-md-3").css("max-width","250px");
            $("#page").css({"padding-left":"0px", "padding-right":"0px"});
        }
    }, 1000);
});
</script>

These are, of course, quick and temporary workarounds while we wait for more permanent solutions. Nevertheless, they are simple to use and work quite well. I hope they can be of help to OP Alliks.