Full Screen plugin
Zoom TinyMCE up to the whole screen.
Contribute to this pageThis plugin adds full screen editing capabilities to TinyMCE. When the toolbar button is pressed the editable area will fill the browser’s viewport. The plugin adds a toolbar button and a menu item Fullscreen
under the View
menu.
Full screen mode can be toggled using the following keyboard shortcuts:
- macOS: Command+Shift+F
- Most other operating systems (such as Windows or Linux): Ctrl+Shift+F
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'fullscreen',
menubar: 'view',
toolbar: 'fullscreen'
});
Configuration options
The following configuration options affect the behavior of the Full Screen plugin.
fullscreen_native
Note: This feature is only available for TinyMCE 5.5 and later.
Note: The
fullscreen_native
option requires the Fullscreen plugin.
The fullscreen_native
option allows the editor to use the browser full screen mode, rather than only filling the browser window when full screen mode is enabled. This functionality is the same as full screen mode for online videos.
Type: Boolean
Default Value: false
Possible values: true
, false
Example: Using fullscreen_native
To use the browser-native full screen mode for the TinyMCE editor, set fullscreen_native
to true
. For example:
tinymce.init({
selector: 'textarea', // change this value according to your html
plugins: 'fullscreen',
fullscreen_native: true
});
Limitations of the fullscreen_native option
The fullscreen_native
option has the following limitations. When fullscreen_native
is enabled:
- The Escape keyboard key (Esc) will exit full screen mode. Default editor behavior of the Esc key will be overridden by browser and the Esc key will exit full screen mode instead of closing dialogs, menus, or moving focus from the editor UI to the editor content. This may lead to accessibility issues.
- Firefox users - The full screen keyboard shortcut (Ctrl+Shift+F) cannot be used to repeatedly toggle the browser-native full screen mode on and off without interacting with the editor between on toggles. If the user does not interact with the editor between off and on toggles, the plugin will fall-back to filling the browser window.
- Microsoft Internet Explorer 11 users - The full screen keyboard shortcut (Ctrl+Shift+F) will not activate the browser-native full screen. If the full screen shortcut is used, the plugin will fall-back to filling the browser window.
- If the editor is initialized inside an iframe element, full screen mode will only fill the iframe on Firefox and Microsoft Internet Explorer 11.
Toolbar buttons
The Full Screen plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
fullscreen | Toggles fullscreen mode |
These toolbar buttons can be added to the editor using:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Full Screen plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
fullscreen | View | Toggles fullscreen on/off. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Full Screen plugin provides the following JavaScript command.
Command | Description |
---|---|
mceFullScreen | Toggles full screen mode. |
Example
tinymce.activeEditor.execCommand('mceFullScreen');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.