Using ngQuill and ionic? about ng-quill HOT 15 CLOSED

Just as an update for those who land on this thread - I continued to make progress with ng-quill on Ionic, and got to about 95% of our desired functionality. Unfortunately, the weirdness of Quill on mobile (i.e. the final 5%) seems to be quite difficult to solve. For V1 of our app, I opted to continue using Quill on desktop, but just a standard textarea on mobile. With time, I may be able to resolve the issues with Quill on mobile, but the whole setup was so unwieldy and inconsistent that I think it would take considerable effort.

Regardless, thanks @KillerCodeMonkey for the nice project and everyone else for your input! :)

from ng-quill.

Got It working using some extra css:

(TESTED ONLY ON IOS 9.2 SO FAR)

Solution

index.html

<!-- QUILL -->
<link rel="stylesheet" href="lib/quill/dist/quill.base.css">
<link rel="stylesheet" href="lib/quill/dist/quill.snow.css">

<script src="lib/quill/dist/quill.min.js"></script>
<script src="lib/ngQuill/src/ng-quill.min.js"></script>

view.html

<ion-view view-title="Send">
  <ion-content overflow-scroll="true">

<ng-quill-editor style="height:200px;" class="selectable" ng-model="send_to_customer.email_message" toolbar="true" link-tooltip="true" image-tooltip="true" toolbar-entries="font size bold list bullet italic underline strike align color background link image" editor-required="true" required="" error-class="input-error"></ng-quill-editor>

<style>
.selectable {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  user-select: auto !important;
}
</style>

  </ion-content>
</ion-view>

Important to add selectable class and set the height to ng-quill-editor, wasn't working without the extra css.

from ng-quill.

@thmclellan I tried to check my notes for you, but I can't seem to find them. Regardless, I seem to recall that Trix was promising... That could be totally off, but might be worth checking.

Taking a totally different approach

There's an argument that most mobile users always use mobile and most desktop users always use desktop. That leaves those rare few who switch back and forth. For these users, we simply strip any HTML tags when editing on mobile. Before doing so, we check for HTML, though, and warn users that by editing on mobile, their rich text formatting will be lost. If users insist on retaining the rich text, they know they'll need to use a desktop computer. It's definitely not an ideal solution, but I think it works for now!

from ng-quill.

hey there,

yep ionic does not allow to select text in the app that is why user-select is deactivated.

And keep in mind that using something like richtext editor on mobile app is not that good.

I tested it with cordova and ionic context and i had a lots of trouble with scrolling and selecting text like if you want to copy and past something.

greets

from ng-quill.

Hi,

It looks like it working fine now on IOS. I need to do some further testing though.

If richtext editor is not a good option, what option do you suggest to edit HTML on IONIC being fetched from a rest api?

It seems there is not an alternative to edit html on ionic so far.

Thanks

from ng-quill.

;) right. or you store your stuff as markdown

from ng-quill.

@nasy, did you get ng-quill working in Ionic via the web browser (e.g. iOS Safari), or actually via Cordova (WebView)?

Either way, I can't position the cursor in the middle of a word, and the virtual keyboard won't appear. Any tips on what might be wrong? I can't find many accounts of people who have successfully used Quill with Ionic and Cordova...

from ng-quill.

i used it, but it was a mess on ios, because of the cursor issue. I was not able to mark text for copy and the cursor was flipping around.

Maybe QuillJS v1 is a solution because you are not working with html directly.

from ng-quill.

I used it via Cordova. It worked okay but it was not great. Sometimes it was a bit buggy, keyboard didn't appear and had to press a few times until it showed.

I can't position the cursor in the midle of the word neither.

Not sure if quill is the best solution for mobile.

from ng-quill.

Thanks, @KillerCodeMonkey and @nasy. Any suggestions on an HTML editor that you've found works ok in Cordova? I might keep Quill for our web app but substitute in something else for Cordova. Maybe Trix?

from ng-quill.

By the way, further testing suggests that I can position the cursor in the middle of a word. It just takes a long press instead of a short tap (which is an iOS thing, not an Angular/Ionic/Quill thing). Of course, on mobile, this feels natural, but on the emulator on my desktop, it took some fiddling till I realized this is how it works.

So, there's hope for Quill! (in an Ionic/Cordova app on iOS, at least)

The only "deal breaker" I have right now is that the keyboard doesn't show when the field is focused. Any thoughts on what I might do to fix that? I've considered using ionic-plugin-keyboard, but that feels heavy-handed for what I'm trying to accomplish.

from ng-quill.

i think the ionic keyboard plugin is included in a ionic project per default?
If not i would recommend it :D.

It handles multiple issues with hybrid apps and keyboard.

So i do not have problems, that the keyboard does not show up

from ng-quill.

@rinogo Thanks for this post - I'm trying to make Quill work on iOS. Did you find another rich text editor that is more mobile friendly? I'm about to go through the same process as you did of working through the issues and wondered if you had any suggestions.

I've also thought about a standard textarea for mobile users, though they would have to deal with HTML if the content was previously edited with Quill on desktop.

Thanks,
Tom

from ng-quill.

On quill editor when tap and hold for selection on IOS it toggles keybord.

Added -webkit-user-select: text;, still issue on IOS selection
.ql-editor{
-webkit-user-select: text;
user-select: text;
}

Any fix for this issue on recent updates....

from ng-quill.

You can add class on click the quill-editor
like:-
IN HTML
<quill-editor id="quilleditor" quill-editor-toolbar (click)="quillclick()">

<button class="ql-bold" [title]="'Bold'">
<button class="ql-italic" [title]="'italic'">

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

from ng-quill.