TinyMCE Fix (NO MORE SUPPORTED)

TinyMCE Fix (NO MORE SUPPORTED) 0.7.1

No permission to download
Overview Updates (19) Reviews (13) History Discussion
Has anyone solved the iOS issue where selecting text triggers an overlay which blocks the editor toolbar?

I'm trying to come up with an easy solution. A sloppy fix is to simply add more padding for Touch devices:
Code: 
.Touch .quickReply .mceIframeContainer{padding-top: 45px!important; background: $white;}

A better way would be to toggle that extra padding only when the iOS text selection event is triggered. Something like the following could/should work, but I must be missing something:
Code: 
$(document).addEventListener("selectionChange", function() {
    $(".mceIframeContainer").css('padding-top','45px');
}, false);

Obviously either of these is just a hack, since you wouldn't need the extra padding when selecting text that's not in the first line.
 
TrevC said:
Has anyone solved the iOS issue where selecting text triggers an overlay which blocks the editor toolbar?

I'm trying to come up with an easy solution. A sloppy fix is to simply add more padding for Touch devices:
Code: 
.Touch .quickReply .mceIframeContainer{padding-top: 45px!important; background: $white;}

A better way would be to toggle that extra padding only when the iOS text selection event is triggered. Something like the following could/should work, but I must be missing something:
Code: 
$(document).addEventListener("selectionChange", function() {
    $(".mceIframeContainer").css('padding-top','45px');
}, false);

Obviously either of these is just a hack, since you wouldn't need the extra padding when selecting text that's not in the first line.
Click to expand...

You mean the iOS popup that appears when you select some text? If yes, I totally agree, that's an horror. That's why future on-line editors must help users to avoid them to select some text as much as possible. You can try to put the button toolbar below the editor (see Enhanced TinyMCE addon)... but I don't like the display. And with the autosize (or elastic) addon which will extend the text box area height, it won't be that convenient.
 
cclaerhout said:
You mean the iOS popup that appears when you select some text? If yes, I totally agree, that's an horror. That's why future on-line editors must help users to avoid them to select some text as much as possible. You can try to put the button toolbar below the editor (see Enhanced TinyMCE addon)... but I don't like the display. And with the autosize (or elastic) addon which will extend the text box area height, it won't be that convenient.
Click to expand...
Yeah, that's the selection behaviour I'm referring to.

My temporary fix is to add the padding. It's ugly, but at least the buttons aren't obscured. The iOS selection options/popup must fire a JS event somewhere in mobile safari. Surely we could just toggle the extra padding when it's active... somehow?

I think swapping the toolbar position would completely confuse people :)
 
TrevC said:
Yeah, that's the selection behaviour I'm referring to.

My temporary fix is to add the padding. It's ugly, but at least the buttons aren't obscured. The iOS selection options/popup must fire a JS event somewhere in mobile safari. Surely we could just toggle the extra padding when it's active... somehow?

I think swapping the toolbar position would completely confuse people :)
Click to expand...
May be this: http://css-infos.net/property/-webkit-touch-callout or this http://css-infos.net/property/-webkit-user-select. Since you are working on this right now, can you give a try please? Otherwise I will give a try later.

An interesting link
 
I'm familiar with these properties...

Just checked these within editor_contents.css:
-webkit-user-select works too well... you can't even select the editor body to enter text.

-webkit-touch-callout: none!important; had no effect.
 
TrevC said:
No issues here, but caches need to be fully cleared or it creates similar problems.
Click to expand...
can you try to add a link but click 'cancel' and then create a linebreak? That triggers it here 100%. Cache is cleaned (without cleaning overlay won't even open properly)
 
Ah yeah, I can duplicate that. Steps: Write a word > select the text > trigger link button > don't enter anything > hit cancel > select end of word > newline.

Every newline after that will be wrapped in:
HTML: 
<span data-mce-type="bookmark" data-mce-style="overflow:hidden;line-height:0px" style="overflow:hidden;line-height:0px">
 
TrevC said:
Ah yeah, I can duplicate that. Steps: Write a word > select the text > trigger link button > don't enter anything > hit cancel > select end of word > newline.

Every newline after that will be wrapped in:
HTML: 
<span data-mce-type="bookmark" data-mce-style="overflow:hidden;line-height:0px" style="overflow:hidden;line-height:0px">
Click to expand...
I created a bookmark of the highlighting text because I didn't want to have any problem on IE (... I had a lot of problems with MarkItUp because IE can't keep a text of beeing highlighting). To be honest, I didn't test if without this bookmark the selection was lost or not on IE after the overlay displays. I will check this later.

Now I've tried to see that extra line, I don't have it on Firefox. Which browser are you using?
 
cclaerhout said:
I created a bookmark of the highlighting text because I didn't want to have any problem on IE (... I had a lot of problems with MarkItUp because IE can't keep a text of beeing highlighting). To be honest, I didn't test if without this bookmark the selection was lost or not on IE after the overlay displays. I will check this later.

Now I've tried to see that extra line, I don't have it on Firefox. Which browser are you using?
Click to expand...
Chrome Canary. After the bug is triggered, it's wrapping every subsequent line with that span. The span is reducing the line-height making everything smush together ;)
 
cclaerhout said:
I created a bookmark of the highlighting text because I didn't want to have any problem on IE (... I had a lot of problems with MarkItUp because IE can't keep a text of beeing highlighting). To be honest, I didn't test if without this bookmark the selection was lost or not on IE after the overlay displays. I will check this later.

Now I've tried to see that extra line, I don't have it on Firefox. Which browser are you using?
Click to expand...
Some News: I confirm that this bloody IE needs it.
The link function has problem with IE7. I will check this.

Edit: IE7 bug found.
 
I have zero concern for IE7 users myself. Perhaps other users of your TinyMCE fixes feel the same way? Might be easier and far more practical to only support relatively recent browsers.
 
TrevC said:
I have zero concern for IE7 users myself. Perhaps other users of your TinyMCE fixes feel the same way? Might be easier and far more practical to only support relatively recent browsers.
Click to expand...
It seems the bug has been reported here: http://www.tinymce.com/develop/bugtracker_view.php?id=4213
I don't like the css solution, here's my fix:
Code: 
$('.mceIframeContainer iframe').contents().find('*[data-mce-type="bookmark"]').contents().unwrap();
or
Code: 
$('.mceIframeContainer iframe').contents().find('*[data-mce-type="bookmark"]').remove();

I would have prefer to do it with the tinymce dom selector... but I didn't find anything easy to target data-mce-type elements (may be possible to get the selection... destroy the element and do the same thing with the following one).
 
cclaerhout updated TinyMCE Fix with a new update entry:

Version 0.51 released

Version 0.51 released
  • Fix a bug with the tinyMCE bookmark & Chrome (tested)
  • Fix a bug of the addon with IE7 (tested)
To update, use Chris Auto installer addon or you can only upload files.

Information:
  1. If you don't see any changes, you must update your browser cache or just directly load this js file inside your browser:...
Click to expand...

Read the rest of this update entry...
 
For the fast overlays, can we disable the fade-in/fade-out animations? Which file would I find the value located in?

Thanks :)
 
TrevC said:
For the fast overlays, can we disable the fade-in/fade-out animations? Which file would I find the value located in?

Thanks :)
Click to expand...
Mmm... that's the default overlay effect. I don't think you can turn it off. It should have been other effects available, but the website seems to have some problems (see here).

Another thing, I will have to push a new update since the overlay z-index is not enough high for people who are using the TinyMCE fullscreen plugin.
 
I've edited my xenforo.js, setting all animations speeds to "0", but the quick overlays still seem to animate... not sure where they're getting the speed settings from :)
 
TrevC said:
I've edited my xenforo.js, setting all animations speeds to "0", but the quick overlays still seem to animate... not sure where they're getting the speed settings from :)
Click to expand...
The jQueryTools is also inside the xenforo.js file but it's minified at its top.

You can try to modify or add the "speed" settings (see here) and set it to zero. But if you want to use message edit overlay with TinyMCE, it's not working well on mobile devices.
 
You must log in or register to reply here.
Top Bottom