Ngx-quill: The Editor Can't Get Focus On IOS Platform

[nobage]

Hello, I have integrated this plugin in Ionic3 project. It worked on Android platform, but the editor can't get focus on ios platform. Could you give some sugesstionto fix this problem? THX.

[KillerCodeMonkey]

Did you use your ionic project AS webapp or native APP. Please check if it
is working on IOS and Safari mobile with and without ionic.

If it is a native APP Problem try it without keyboard Plugin.

I tested it in ionic 1 with an old quill version. There i got some troubles on ios, too.

[KillerCodeMonkey]

any updates? Would be interesting if you get a solution.

[nobage]

KillerCodeMonkey, so sorry for my late reply. I got a solution of this question.
Because of the input widget of quill editor is a 'div' with 'contenteditable=true', It can't work on IOS platform. I just add one css property on this 'div' like '-webkit-user-select:text'.

<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" data-placeholder="placeholder text"></div>

[KillerCodeMonkey]

Nice thanks for sharing the solution!

Am 03.01.2018 5:30 vorm. schrieb "nobage" [e-mail]:

KillerCodeMonkey, so sorry for my late reply. I got a solution of this
question.
Because of the input widget of quill editor is a 'div' with
'contenteditable=true', It can't work on IOS platform. I just add one css
property on this 'div' like '-webkit-user-select:text'.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/86#issuecomment-354935684,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYCpkF4NmzvuPR_wRdUktZmyw77Fgks5tGwJKgaJpZM4RJg-y
.

[robpaveza]

@KillerCodeMonkey Did you merge this fix into your project? I am having the same issue.

[KillerCodeMonkey]

Nope, because I am using quilljs and quilljs adds content editable to the div.

Please check the quilljs repository if there are any issues related to that.

I will not fix or workaround issues that are QuillJS issues ;)

Am 21.03.2018 um 08:10 schrieb Rob Paveza [e-mail]:

@KillerCodeMonkey https://github.com/killercodemonkey Did you merge this fix into your project? I am having the same issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/86#issuecomment-374849484, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYKcJy_t3TY_d6fx5x-jIVDIvx4svks5tgfzTgaJpZM4RJg-y.

[robpaveza]

Fair enough, but it's not clear to me that this is specific to QuillJS. I can use the QuillJS playground on my iPhone just fine.

But yeah, I get it. For anyone who runs into it: I fixed by just adding this:

.ql-editor {
    -webkit-user-select: text;
}

[KillerCodeMonkey]

Strange.. I only add a wrapper html-tag an no styling and nothing.
If you are using this with something like an ionic-app it is another case. Ionic disables user-select per default.

Am 21.03.2018 um 08:18 schrieb Rob Paveza [e-mail]:

Fair enough, but it's not clear to me that this is specific to QuillJS. I can use the QuillJS playground on my iPhone just fine.

But yeah, I get it. For anyone who runs into it: I fixed by just adding this:

.ql-editor {
-webkit-user-select: text;
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill/issues/86#issuecomment-374850591, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYN6pBY4zU2EtvYVRu-OQKfH2W0pOks5tgf7WgaJpZM4RJg-y.

[bkarv]

@nobage @robpaveza thanks for the solution had same issue testing on iOS (within ionic 4) this resolved the situation. However if I am writing text within the container, I am unable to select whole words within IOS, do you have the same issue?

[KillerCodeMonkey]

Die you checked Out the Ionic v3 example and the readme section with CSS
and user-select?

But keep in mind this is a wysiwyg Editor and The the usability is Always
Not the best on mobile because of selecting Things. It is very hard and
frustrating on mobile devices.

Am So., 27. Jan. 2019, 00:10 hat bkarv [e-mail]
geschrieben:

@nobage https://github.com/nobage @robpaveza
https://github.com/robpaveza thanks for the solution had same issue
testing on iOS (within ionic 4) this resolved the situation. However if I
am writing text within the container, I am unable to select whole words
within IOS, do you have the same issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/86#issuecomment-457874142,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYC0CTRk-d1uyDx5F_CNZiqBEShmqks5vHOBtgaJpZM4RJg-y
.

[momja]

@robpaveza what did your html file look?

[BakshinderSingh]

KillerCodeMonkey, so sorry for my late reply. I got a solution of this question.
Because of the input widget of quill editor is a 'div' with 'contenteditable=true', It can't work on IOS platform. I just add one css property on this 'div' like '-webkit-user-select:text'.

<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" data-placeholder="placeholder text"></div>

This solution worked for my project also

[bvergara87]

I just tried this today in my code using the following in CSS

.ql-container,.ql-editor, .ql-editor.ql-blank, .ql-editor.ql-blank::before, .ql-editor.ql-blank::after {
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
-webkit-user-select: text !important;
}

no luck selecting on iOS 13 Chrome

[deepaklaller1988]

You can add class on click the quill-editor
like:-
IN HTML

In Ts:
quillclick(){
var quilleditor = document.getElementById('quilleditor')
quilleditor.classList.add('newclass')
}
In CSS
.newclass{
-webkit-user-select: text;
}