Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't get mobile theme working in TypeScript #4826

Open
grzegorztomasiak opened this Issue Feb 12, 2019 · 4 comments

Comments

Projects
None yet
2 participants
@grzegorztomasiak
Copy link

grzegorztomasiak commented Feb 12, 2019

Do you want to request a feature or report a bug?
bug

What is the current behavior?
The following code works flawlessly on desktop but does not show tinymce on mobile at all. It's just an empty textarea visible and cursor is blinking (still weird, since it should have that book icon at least):

    import tinymce from 'tinymce/tinymce';
    import 'tinymce/themes/silver/theme';
    import 'tinymce/themes/mobile/theme';
    import 'tinymce/plugins/link/plugin';
    ....
    target: document.getElementById('textarea')
    menubar: false,
    skin: false,
    plugins: 'link',
    toolbar: 'bold italic | link',

Does it look fine for mobile? Or should I implement something more to get this work?
Console does not throw any error. The only thing is content.css file throwing 404 since skin is set to false I believe.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.
n/a

What is the expected behavior?
There should be book icon visible that I could click and trigger editor on full mobile screen

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?
5.0.0

@blackcathikari

This comment has been minimized.

Copy link
Contributor

blackcathikari commented Feb 12, 2019

@grzegorztomasiak Thanks for the report. I'm looking into this, but I'm curious why you set skin to false? What behaviour did you expect from that?

@grzegorztomasiak

This comment has been minimized.

Copy link
Author

grzegorztomasiak commented Feb 12, 2019

hey @blackcathikari just few minutes ago I got it working.
I had to put @import "../../../../../node_modules/tinymce/skins/ui/oxide/skin.mobile.min.css"; for my scss compiler and now mobile skin works.

I am still confused between skin and theme and somewhere I've read that it's better to disable skin if you import it in TypeScript like I did. Does it make any sense? Or should I get it done differently?

@blackcathikari

This comment has been minimized.

Copy link
Contributor

blackcathikari commented Feb 13, 2019

Theme is all the UI code. It's both the framework that defines all the components, and the code that uses those components to make the editor UI.

Skin is purely CSS, but each skin is also specific to a theme. E.g. the Oxide skin only works for TinyMCE 5's Silver theme, while TinyMCE 4's Modern theme has its own skin.

Does it work if you don't import a skin and don't specify skin in your config? You shouldn't need to, provided the files are in the default locations.

We have similar code in our test framework for importing TinyMCE - I'll check what we do.

@blackcathikari

This comment has been minimized.

Copy link
Contributor

blackcathikari commented Feb 13, 2019

A team member has pointed out that setting skin: false would make sense in a headless environment - i.e. when you're not using the UI. Would that apply to your use case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.