Image preview fails in Community 7.6 for iOS Safari

Support

Support
A public community space for Developers, IT Professionals, Architects, and System Administrators to engage and help each other, share knowledge and best practices, find product documentation and Q&A, and discuss technology oriented topics.

Image preview fails in Community 7.6 for iOS Safari

This question has suggested answer(s)

When attaching an image using the enhanced editor on any iOS Safari device, the preview fails to appear in the Image Insert box, and when the insert is completed the message preview does not show the image. But, when the Post is posted, the image does appear in the post.

This worked correctly in version 7.1 but is broken in 7.6. It also works correctly on this site, whatever you are running.

We are working with Couto Solutions as our integrator, and they report they submitted the bug to you and got the reply that iOS Safari is an unsupported platform.

I understand the difficulty of supporting various platforms, but iOS is the fastest growing browser accessing our site, at 25% of our users already. Can you reconsider this policy, or at least this bug?  

All Replies
  • iOS Safari, to an extent, is considered a "not supported, may work" browser as of 7.6.  We are working to support iOS Safari, Android's stock browser, and Chrome for Android in our next release (8.0) with support for responsive design and an improved mobile site/app.

    When testing in iOS Safari and Android's browsers, we've noticed that support for contenteditable, the feature that enables rich text editing within web sites is very buggy if usable (and support did not improve with iOS 7).  Because of this, with 8.0, we're supporting a simplified editor experience for mobile browsers.

    This means, specifically, that mobile browsers can create content using plain text features (similar to what you can currently do within the "Quick Post" widget -- mentions and hashtags are highlighted, but bold/italic, font selection, image insertion, table management are not supported).  This provides a reliable web-based editing experience on mobile browsers.

    When editing rich content, this updated editor reviews the complexity of the content to determine if it can be edited with the simplified mobile editor -- if it cannot, the content is shown in a read-only mode.  If it the content is simple enough for the mobile editor (for example, if the content was created on a mobile device), it will be editable on the mobile device.  Complex and simple content is editable, as normal, on the full desktop experience.

    We could consider hotfixing previous supported versions of Evolution with this updated editor to support mobile devices, however, if your issue is image embedding in rich content, I don't think we have a solution for you, unfortunately.  In our testing, rich editing in every mobile web browser resulted in many forced crashes and confusing editing situations.

  • Hi Ben,

    I may be way off the mark here as I have little experience with this (and I am sure you have done lots of research into this). I can see from this comparison that  contenteditable isn't well supported which is a shame: caniuse.com/contenteditable.

    However would it be possible to fall-back/replace tinymce with a html5 based wysiwyg editor instead such as xing.github.io/wysihtml5. It seems that this has good mobile and desktop browser support and has good feedback from the community, the code is on github here: github.com/.../wysihtml5.

    There are some limitations (covered here: socialcompare.com/.../javascript-online-rich-text-editors) and I am guessing it will output different mark-up to tinymce which would make fall-back difficult.

    Just an idea though and wanted to throw it out there.

    thanks

    Adam

  • Ben Tiedt
    This means, specifically, that mobile browsers can create content using plain text features (similar to what you can currently do within the "Quick Post" widget -- mentions and hashtags are highlighted, but bold/italic, font selection, image insertion, table management are not supported).

    YIKES.

    This is a huge issue for us. One of the main motivators of our going forward with our very expensive upgrade from CS2008.5 to 7.6 was the testing we did on 7.1 that showed image insertion from IOS working. We need an option to have that level of function back.  I do image insertion on IOS on many websites. 

  • The issue is that contenteditable is quite buggy on mobile devices, even when supported, and was a primary contributor to crashes.

    The HTML5 implementations, so far, don't provide the same level of rich content editing as contenteditable-based approaches and don't completely replace TinyMCE to the extent that we use it today.

  • All is not lost.  Prior to the decision to use the simpler editing experience on mobile devices, we did invest in bug resolution and improved image insertion UX for TinyMCE (our current rich text editor) on mobile.  This work remains in 8.0 even though it is disabled by default.

    The improved UX includes:

    1. A separate configuration for buttons when accessed on a mobile device.

    2. Direct uploading.  Instead of using any modals, the mobile version, when the insert image button is clicked, directly opens the mobile browser's file selection UI and inserts the image directly.

    Because an effort was put into this implementation, it remains part of 8.0, just disabled by default as an experimental implementation in hopes of better contenteditable support in future releases of mobile platforms/browsers.

    It can be enabled in 8.0 by modifying the communityserver.config file, specifically <editors> <editor> <editorOption name="mobile_tinymce_enabled" /> to a value of "true" from it's default of "false".

  • Also, note, that the sample you provided also relies on contenteditable and IFRAMES... just like TinyMCE.  I had assumed it was a canvas-based approach (which would be awesome, but also requires custom HTML parsing/rendering).

  • FYI to others experiencing these problems using IOS with 7.6, we solved the 'contenteditable' instabilities by disabling socket support from IOS devices. That has made the enhanced editor very stable with IOS.

    For a separate reason, we have disabled socket support now on all browsers. We found it was making both Chrome and Safari unstable.