I have an app with Meteor React using TinyMce through react-tinymce (as per instructions at https://www.tinymce.com/docs/integrations/react/
I have a form component with TinyMCE which is called from an orderedlist to allow users to add comments. It works as expected except in the following situation:
When using either an iPad or iPhone (works fine on desktops and Android mobile).
The first instance of the form works as expected, however with subsequent attempts to add comments the cursor does not show up in TinyMCE and the user cannot enter their comments.
Without an external keyboard, when the form is opened the keyboard pops up - I have found that by manually closing the keyboard, then tapping in the textarea again it works.
With an external keyboard (on iPad), clinking the link in the menubar (I am using the link plugin) and then closing it and tapping in the textarea again it works.
I have attached code to show how TinyMCE is initiated (and removed), as well as how it is called in the form.
Any suggestions as to what I can try to get this to work properly on an iPad/iPhone would be greatly appreciated.
componentDidMount() {
tinymce.remove();
tinymce.init({
selector: '.addComments,
plugins: "autoresize link paste",
paste_as_text: true,
autoresize_bottom_margin: 10,
relative_urls: false,
link_title: false,
default_link_target: "_blank",
height: 200,
autoresize_max_height: 200,
toolbar: 'underline italic numlist link',
menubar: '',
skin: "lightgray",
statusbar: false,
content_css : '/css/content.css'
});
}
componentWillUnmount() {
tinymce.remove();
}
And it is rendered as follows:
<div className="AddComments" id={`background${this.props.meetingId}`} onChange={this.handleEditorChange}></div>
I found that others are having problems with TinyMCE on an iPad https://github.com/tinymce/tinymce/issues/2699 so I have switched to react-quill and it works fine across all platforms.
Related
I have this page with a TinyMCE 5.10.4 Editor if I load the page at full desktop size, and then switch it to mobile sized, the text box appears as normal, I believe this is because while the screen is sized to a mobile device, TinyMCE recognizes it as a desktop screen.
However, if I load the page in mobile sizing it gives me a graybox that links to an external editor, and gives me this gross empty text area that has my background image behind it.
How do I get TinyMCE to always load desktop mode?
I'm not sure if this is what you are looking for, but have you tried overriding the mobile settings to match your existing settings when initializing TinyMCE? This would ensure that even if TinyMCE loaded in mobile mode, it would still look like desktop mode. Something like this:
tinymce.init({
selector: 'myTextArea',
mobile: {
menubar: true,
toolbar_mode: "wrap"
}
});
The docs also specify that you should include the following <meta> tag in your HTML document's <head> to ensure it can detect the correct mode to use.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the reference in the TinyMCE v5 doc where I found this info:
https://www.tiny.cloud/docs/mobile/#configuringmobile
I want converse.js such that it should work properly in mobile browser.
converse.initialize({
websocket_url: webSocketUrl, // ConnectionUrl
keepalive: true,
message_carbons: true,
message_archiving: 'roster',
//play_sounds: true,
auto_login: true,
jid: user,
password: password,
show_controlbox_by_default: false,
auto_list_rooms:true,
allow_logout: false,
allow_registration: false,
});
Can we set in config?
I finally got the answer , i removed "this.chatboxviews.trimChats();" from $(window).on("resize") function in converse.js.The main issue was when we open the chat box it opens the android keyboard on focus which resizes the window and minimize the chat box ,where as in IOS it doesnt happen like that it doesnt open keyboard on focus. So, finding the main cause of the issue solved my problem.
I've set up a website using fullpage.js.
I have now problems on touch-devices: When autoScrolling is enabled I often can't swipe to an other section. It's like your already on the bottom of the page.
I have this issue on all touch-devices I've tried (Ipad & Iphone with Chrome and Safari, Android with Chrome). On a desktop computer i don't have this problem.
Visit www.airport-signage.com to see the issue.
My settings for fullpage.js:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'approach', 'work', 'services', 'company', 'team', 'contact'],
menu: '#menu',
'autoScrolling': true,
'controlArrows': true,
'slidesNavigation': false,
'verticalCentered': false,
'touchSensitivity': 5,
'css3': true,
'fixedElements': '#fixedHeader',
'scrollOverflow': true,
'normalScrollElements': '#map_canvas',
'sectionsColor': ['#3df945', '#000', '#fff', '#3df945', '#000', '#fff', '#3df945'],
'onLeave': function(){
stuff
},
});
});
What could the problem be? How can I fix it?
removing
'normalScrollElements': #map_canvas',
helped me to get rid of the issue.
Just wondering if the original poster ever figured out what was up.
I recently started using fullPage.js and it's not working as intended on mobile Chrome after inserting anchors for better navigation.
I have created my application using IBM Worklight in Eclipse. I have added the iPhone environment and installed successfully my application on my device, but I have noticed that in some screens numbers appear with an underline and when tapped it shows a dialog box with call function.
I have tried using text-decoration:none so that underline does not appear, but it is still appearing. I have tried:
HTML
<span class="bluelink" data-dojo-type="dojox.mobile.TabBarButton">40562231</span>
CSS
.bluelink {
color:#1238a6; text-decoration:none;
}
Another issue I am facing is that when using alert(), it shows the title title as the HTML filename like MyApp.html. Anybody know how to fix this?
Instead of alert() use the WL.SimpleDialog API. Explained here.
WL.SimpleDialog.show(
"My Title",
"My Text",
[{
text: "First Button",
handler: function() {
WL.Logger.debug("First button tapped");
}
}]
)
As for the phone number, try the option here:
http://razoredgelabs.com/2013/03/how-to-stop-apple-ios-devices-from-styling-phone-numbers/
There are also the following questions:
How do I remove the blue styling of telephone numbers on iPhone/iOS?
Mobile HTML rendering numbers
Prevent Phone Number recognition on JqueryMobile
How to disable phone number linking in Mobile Safari?
https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html
I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.
I've found this so far:
Using Drag and Drop From JavaScript
Safari, Dashboard, and WebKit-based
applications include support for
customizing the behavior of drag and
drop operations within your HTML
pages.
Note: This technology is supported
only on desktop versions of Safari.
For iPhone OS, use DOM Touch,
described in Handling Events (part of
Safari Web Content Guide) and Safari
DOM Additions Reference.
Here. But it's outdated (2009-06-08).
Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).
Thanks!
I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).
Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
I have found native html5 drag&drop now works in safari, with a few specific notes;
You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');
you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)
OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)
On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails
I thought you required
CSS -webkit-user-drag: Element; and `-webkit-user-drop: element;
or if you prefer
Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
but it seems just the usual draggable attribute is enough
Element.setAttribute('draggable',true);
This seems to be the bare minimum to drag & drop an element
Element.setAttribute('draggable',true);
function OnDragOver(Event)
{
Element.setAttribute('DragOver',true);
Event.stopPropagation(); // let child accept and don't pass up to parent element
Event.preventDefault(); // ios to accept drop
Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
}
function OnDragLeave(Event)
{
Element.removeAttribute('DragOver');
}
function OnDrop(Event)
{
Element.removeAttribute('DragOver');
Event.preventDefault(); // dont let page attempt to load our data
Event.stopPropagation();
}
function OnDragStart(Event)
{
Event.stopPropagation(); // let child take the drag
Event.dataTransfer.dropEffect = 'move';
Event.dataTransfer.setData('text/plain', 'hello');
}
Element.addEventListener('dragstart',OnDragStart);
Element.addEventListener('drop',OnDrop);
Element.addEventListener('dragover',OnDragOver);
Element.addEventListener('dragleave',OnDragLeave);
Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:
http://www.html5rocks.com/en/mobile/touch/