CKEditor 4.4.7 does not show up on any mobile browsers
Asked Answered
B

2

10

I am creating an internal CMS for work, and it is important that all pages be mobile-friendly. When you view a page with CKEditor 4.4.7 installed from a phone, the editor shows up as a normal textarea and none of the HTML or text within it is properly formatted.

I can request a desktop version using my phone's browser, and sometimes this will work. It seems to be pretty hit-or-miss across different phones. I don't believe it has anything to do with enabling JavaScript.

Sorry for the lack of technical details - has anyone had any experience with this before?

Thanks.

EDIT ---

Found it. I'm currently invoking the editor by creating a normal text area and then adding this javascript which replaces it given an ID:

  <script type="text/javascript">    
    $( document ).ready( function() {
  $( 'textarea#SomeIDHere' ).ckeditor();
} );
  </script>

Well, after some extensive digging, I found that you can automatically call whatever browser it's loaded into "Compatible", even though it's not necessarily safe or true, simply by adding altering the code as such:

  <script type="text/javascript">   

 CKEDITOR.env.isCompatible = true; 

    $( document ).ready( function() {
  $( 'textarea#SomeIDHere' ).ckeditor();
} );
  </script>

I edited this just in case anyone ever comes across the same issue. Not sure how to close the question though. I'm too new and dumb.

Brisance answered 11/6, 2015 at 18:20 Comment(1)
How Are you? Please answer to my question please : #71813691 , i need helpPrelacy
W
12

In general, CKEditor is compatible with iOS and Chrome on Android. If it does not show up in these environments, this is most often an issue with the environment detection mechanism being misled by the browser user agent string.

Up till version 4.4.7 (actually, 4.4.8, but this one hasn't been released yet) CKEditor is only loaded on whitelisted environments (as defined in the env.js file). The original purpose was to block CKEditor from appearing in environments where it's not supported. However, the browser detection mechanism is not perfect, especially on mobile devices where browser vendors tend to spoof user agent strings, causing issues that you described.

You can, however, enable CKEditor is unsupported environments (at your own risk) by changing the CKEDITOR.env.isCompatible flag to true, which causes CKEditor to load in all environments, including the unsupported ones. Note, however, that this has one drawback: it not only enables CKEditor in modern mobile devices, but also tries to load it in old Internet Explorer versions (6&7) where it no longer works (which may cause some level of user frustration). And thus, when using this solution, it is recommended to still blacklist old IEs, like this:

// Enable CKEditor in all environments except IE7 and below.
if ( !CKEDITOR.env.ie || CKEDITOR.env.version > 7 )
   CKEDITOR.env.isCompatible = true;

You can read more about it in the Enabling CKEditor in Unsupported Environments article.

An important note: This mechanism is just about to change in CKEditor 4.5, the next major relase that is due very soon. Ticket #13316 changes CKEDITOR.env.isCompatible from a whiletlist to a blacklist which will hopefully help resolve issues like this one.

Wineglass answered 12/6, 2015 at 6:32 Comment(1)
I forgot to check back here, sorry. Thanks for your reply. It is definitely an improvement on the workaround I found.Brisance
C
1

here solution for you just need to change or updated you ckeditor.js file to latest ckeditor.js file

here link of latest ckeditor.js

here screenshot

enter image description here

Choriamb answered 11/8, 2016 at 8:13 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.