[MGNLUI-2553] Make sure rich-text editing works again on the iPad Created: 08/Jan/14  Updated: 03/Feb/16  Resolved: 06/Jul/15

Status: Closed
Project: Magnolia UI
Component/s: forms, tablet
Affects Version/s: 5.2, 5.2.1, 5.4
Fix Version/s: 5.3.10

Type: Improvement Priority: Critical
Reporter: Andreas Weder Assignee: Christoph Meier
Resolution: Fixed Votes: 2
Labels: ipad, mobile, pain-point, support, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified
Environment:

iPad running iOS 5+


Issue Links:
Relates
relates to MGNLUI-3333 Enable ck editor in ipad Closed
dependency
relation
is related to MGNLUI-1582 Rich text editor text selection does ... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:

 Description   

We had to disable rich-text editing entirely due to problems with CK editor and other, similar rich-text editors. Samuli and Sasha have already done quite some research and proposed solutions to work around this problem, but we haven't done anything yet.

We should find a solution to re-enable rich-text editing on the iPad (and possibly other tablets as well).

Results of testing ckeditor on iPad

  • ckeditor Vaadin addon 7.8.8 (latest)
    • based on ckeditor 4.3 (latest)
  • Vaadin version 7.1.8
  • iPad3 iOS6

NFL Vaadin PoC: doesn't work

  • toolbar is greyed out
  • only by chance you get the keyboard displaying
    • you can spend minutes trying to tap on the editor body in vain
    • if you find the sweet spot, then you can enter text which is also greyish but you cannot delete it
    • could some problems stem from the fact that the widgetset was draft compiled?

CKeditor Vaadin addon demo page: very shaky

  • no problem in getting the keyboard displayed
  • but then it's almost impossible to select text or move the cursor to a different position in text
  • entering text occasionally doesn't work
  • deleting char by char works

Ckeditor official (plain javascript) demo page: works reasonably well

  • selecting a text down in the page and then trying to climb up again to the toolbar e.g. to format it works a bit funky (selection remains dangling as you scroll up and down the page)
  • no problem in getting the keyboard displayed
  • no problem to select text or move the cursor to a different position in text
  • no problem to enter/delete text

Maybe for the iPad would it be worth to use a different editor such as http://xing.github.io/wysihtml5/ which claims support for Safari on iOS 5+ and in the worst case degrades to a textarea?
Tried on the iPad3 iOS6 and seems to work fine.



 Comments   
Comment by Andreas Weder [ 08/Jan/14 ]

Please see comment by Samuli for some solutions: http://jira.magnolia-cms.com/browse/MGNLUI-1582?focusedCommentId=65427&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-65427

Comment by Federico Grilli [ 10/Jan/14 ]

I invested some more time in this iPad issue, given that it was requested in a demo by a prospective client. So I tried yet another approach which I'm sharing here

  • wrap CKeditor as a Vaadin Javascript component (see https://vaadin.com/wiki/-/wiki/Main/Integrating%20a%20JavaScript%20component) instead of using the add-on
  • use inline editing (see http://docs.ckeditor.com/#!/guide/dev_inline) instead of the text area solution as this is eventually using an iframe which, if I got it right, may cause problems on the iPad
    So basically you end up with an editable div and clicking on it brings up the CKeditor
    The outcome was the following:
  • OS X, any browser:
    • works fine
  • iOS6/iOS7, Safari:
    • clicking on the div area brings up the editor and the iPad keyboard BUT
    • there is no way to insert text, typing on the keys produces nothing

The MGNLUI-2553 GIT branch contains this quick experiment. To use the bare bone component (no integration with JCR) you simply need to instantiate it and add it to a layout. I.e.

VerticalLayout layout = new VerticalLayout(); 
layout.addComponent(new CkEditor());
Comment by Christoph Meier [ 06/Jul/15 ]

RichTextEditor field has been re-enabled for ipad.
And it works.

When adding a new component with a RichTextField, when the field has no content yet, it sometimes seems tricky to get the focus of the RTF field. It helps to click to the RTF field rather on the top then on the bottom.

Comment by Christoph Meier [ 06/Jul/15 ]

Commits are on the branch "MGNLUI-2553_iic". (see https://goo.gl/GaOkOm)

Generated at Mon Feb 12 08:57:49 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.