Is it possible to disable the mobile UI features in tinyMCE 5 - mobile

Question

Is it possible to disable the mobile UI feature in tinyMCE, and just show the regular editor?
I'm asking because it only shows a blank screen for me, in mobile (when I click on the "book" icon in the editor box.
I've searched for solutions to the blank page and I only found vague references to "a parent element having overflow set to anything but visible" which didn't help me much.

Answer 1

EDIT November 2019: TinyMCE 5.1 switches to the Silver theme by default on mobile devices. This workaround is no longer necessary.
Our documentation doesn't explicitly explain how to do this, and it isn't something we test so you may run into unexpected issues, but it is certainly possible.
Our mobile UI is implemented as a theme, even in TinyMCE 5, similar to how modern was our desktop theme for version 4 and silver is for version 5. By default when the editor detects it is on a mobile device the theme is set to mobile - we removed this from the v5 docs, but our v4 docs describe the defaults:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'mobile'
}
});
By extension of this concept, where the mobile block overrides the config, you can specify the mobile theme to be modern in TinyMCE 4, silver in TinyMCE 5 and the desktop interface will show:
tinymce.init({
selector: 'textarea',
mobile: {
theme: 'silver'
}
});
I have created a fiddle to demonstrate this which loads the desktop theme on my phone.
http://fiddle.tinymce.com/C9gaab/1

Answer 2

if you want to enable plugins (image, media, fullscreen etc.):
in config:
...
mobile: {
theme: 'silver'
},
...
in tinymce.min.js:
find
"lists","autolink","autosave"
replace to
"advlist", "autolink", "lists", "link", "image", "anchor", "searchreplace", "code", "fullscreen", "media", "table", "paste", "codesample"
or any plugins you need
I know, that source files should not be edited, but only this method helped me.

Answer 3

config the mobile like this:
mobile: {
theme: "silver",
menubar: false,
height: 300,
max_height: 500,
max_width: 500,
min_height: 400,
statusbar: false,
toolbar: false,
plugins: ["autosave", "lists", "autolink"]
}

Answer 4

Well, I just lost a night of sleep over this, so here's the dirty fix while #spyder can figure it out:
First, download the dev (unminified) version of tinyMCE here
Then, edit the file tinymce.js - Modify the function isOnMobile (should be around line 11930) to always return false, like this:
var isOnMobile = function (isTouchDevice, sectionResult) {
var isInline = sectionResult.settings().inline;
return false; //isTouchDevice && !isInline;
};
Finally, Save your changes and minify again (the unminified file is 1mb!). There are several online tools that can do this for you in case you don't these tools in place already.
Note that this only works if you are self-hosting. It ain't pretty, but until there is an official fix, it WORKS.

Answer 5

I'm answering this from the viewpoint of TinyMCE 6 but I think the same logic would work with TinyMCE 5 if you still want to use it for some reason.
The automatic switch to mobile features is poorly documented, but the logic seems to be that TinyMCE init object can include the property mobile to set defaults for the mobile clients. However, if you don't define this property, the TinyMCE internal default will be used instead of your generic config in the init object! This obviously results mobile clients getting totally different UI from the other clients.
As a result, you should always define the mobile property of your TinyMCE init object and use settings you've tested to work with the tools you use. For example, you could use configuration like
mobile: { // undo default mobile settings applied by TinyMCE core – many of these are not officially supported but seem to work pretty well with modern Android and iOS
resize: true,
object_resizing: "img",
menubar: true,
toolbar_mode: "floating",
toolbar_sticky: true,
table_grid: true,
}
or something similar to that. To see the currently available documentation, see https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/#configuring-mobile