Not working on Mobile and Tablets

[sjorsjes]

Hi,

I just implemented your editor and it works pretty sweet, thanks! I noticed that it doesn't work on several devices:

• iPad Mini Retina (iOS 7.0.4)
• iPad 3 (iOS 7.0.4)

It does work fine on these

• iPhone 4 and iPhone 5s (iOS 7.0.4)
• Nokia Lumia 520 (Windows Phone 8.0)
• Microsoft Surface 2 (Windows RT 8.0)
• Asus Nexus 7 (Android 4.4.2)

Mobile It does seem to work better with mobile: false (default), as soon as i set mobile to true, it seems to break and just show the default textarea.

Tablets Just noticed that the same things goes for the tablets. When i turn the tablet support off (tablet: false) it works on the iPads i mentioned before.

Any thoughts on this?

[Alex-D]

Hi!

It's really strange, I do not have iPad to test my editor.

Concerning mobile/tablet support on/off it was managed by regexp here : https://github.com/Alex-D/Trumbowyg/blob/master/trumbowyg/trumbowyg.js#L1065

You can optimize regexp if you want :)

[Alex-D]

The v2.0.0 remove mobile and tablet filter. So i close this issue.

If you don't want activate Trumbowyg on mobiles, you just need to don't launch the plugin.

[kevin907]

This plugin is not working on mobile. Keyboard is not opening while tapping on editor.

I am also not able to find any solution to the issue on your website.

Issue is found in IOS 8+, I also tried using events by cursor wont appear in mobile devices.

Need your assistance!

Here is the configuration am using

/**
 * Created by yaga on 19.02.15.
 */
jQuery(document).ready(function($){
    attach_editor('.wysiwyg-edit');

    var collapsedEditor = $(".trumbowyg-editor", $(".collapsed-wysiwyg"));

    collapsedEditor.on("focus click", function(){
        $(this).closest('.collapsed-wysiwyg').removeClass('collapsed-wysiwyg');
    });

    collapsedEditor.on("paste", function(){
        $(this).closest('.collapsed-wysiwyg').removeClass('collapsed-wysiwyg');
    });
});

function attach_editor(selector) {
  var placeHolderText = '';
  $(selector).trumbowyg({
        fullscreenable: false,
        closable: false,
        autogrow: true,
        removeformatPasted: false,
        btns: ['bold', 'italic', '|', 'unorderedList', 'orderedList', '|', 'link']
    }).on('tbwfocus', function(){
      // Store old value
      placeHolderText = $('.trumbowyg-editor').attr('placeholder');
      $(this).attr('placeholder', '');
      $('.trumbowyg-editor').attr('placeholder','');
    }).on('tbwblur', function(){
      $(this).attr('placeholder', placeHolderText);
      $('.trumbowyg-editor').attr('placeholder', placeHolderText);
    });
}

[Alex-D]

As you can see in the documentation : http://alex-d.github.io/Trumbowyg/documentation.html#mobile-tablet

You can use library like enquire to enable or not Trumbowyg on mobiles. Or just, with Modernizr if device has touch feature.

A WYSIWYG is not comfortable on mobiles and tablets, so I didn't support them.

[statler]

Hi Alex - is this still an issue? The link doesnt seem active.

I just have a couple of users reporting issues with an iphone and like you don't have the device to check it :(

[Alex-D]

I did not test Trumbowyg on mobile devices :/

It's on my todo for v3, but no due date for this new version for now (at the earliest, Q4 2019).

[statler]

Thanks Alex;

Works fine on any android device. Fails on IOS across the board in chrome and safari so it is buried in apple-land. My research indicates it is most likely attributable to this; https://stackoverflow.com/questions/52826005/workaround-for-ios-10-12-webkit-safari-chrome-iframe-focus-bug

I an trying to implement the fix. Could you advise if it is relevant, and if so, where I would apply the fix (which is basic). It just requires adding the following code to the Iframe the embedded text is in;

document.addEventListener('touchstart', {});

This is pretty critical to me, so I will try and make it work if I can get some pointers because otherwise I have the horrible job of rewriting a big mobile app to replace HTML editors, and frankly Trumbowyg is my favourite by a mile :)

[Alex-D]

Trumbowyg does not use iframe. So I did not understand how this could fix the bug :/

I need to take more time and an iOS thing to test that.

[statler]

This looks more promising I think - you can get a similar issue with quill https://github.com/KillerCodeMonkey/ngx-quill/issues/86

I know the code uses this attribute :)

[statler]

OK - so turns out this isn't a trumbowyg problem exactly. On ios, it does funny things with the webkit-user-select. If this (or the other user-select) are set to none in any parent container then it wont work properly. Setting webkit-user-select:text on the parent container fixed it for me and the trumbowyg works in the IOS environment just fine

This was set because the framework I use sets it for all the templates :(

[Alex-D]

So, if I add -webkit-user-select: text; user-select: text; to Trumbowyg's CSS, it should fix it for everybody?