My brother and I are looking to match the rich text editing experience of One Note and Evernote in a new Ionic 3 app under development.
The accessory bar containing options to insert bulleted-lists, change fonts, etc. appears immediately above the keyboard, as shown here - OneNote example.
After reading Max Lynch’s post on “how to write Cordova plugins”, we believe one way to do so is to wrap the existing native solutions into a Cordova plugin:
mmmmmaybe. You’re locking yourself into the skill and schedule of somebody else. Are these solutions widely used industry standards, that are updated often, with lots of closed Github issues? Or are they “interesting?”
Also, in the long run, you’ll probably want to build a Capacitor plugin, not a Cordova plugin. That isn’t quite ready for prime time yet though.
I think you should do research about paid solutions, like Froala.
Hey, AaronSterling - thanks very much for your reply! Your bring up some very important planning considerations about the quality and maintainability of wrapping others’ projects into ours.
Capacitor is something entirely new to me, so thanks for that - I will definitely look into that.
I also appreciate the recommendation for Froala. I had found this product before exploring the route I posted above. However, I did not see that they offer a “toolbar” RTE that appears above the native keyboards on mobile devices. It seems kind of clunky for mobile to use the standard RTE option bar across the top of a textbox entry field. I also don’t think the “inline” RTE is intuitive to the user. Am I missing something… does Froala have a “toolbar” appearance option?
Hey robinyo - thanks so much for your thorough response! I really appreciate your sharing your extensive experience in this area.
I have taken a brief look at all of the options you listed. However, I feel like I continue to run up against the same problem with all these solutions - none seems optimized for mobile. Specifically, none seems to offer a “toolbar” RTE option display that slots nicely above the native keyboard on mobile devices.
Am I missing something? Does 1 (or more) of these actually offer a “toolbar” appearance? Or is there a relatively easy modification to generate this UI?
I have been looking into this because I need a rich text editor in my Ionic App that will work on both iOS and Android.
I integrated Quill using ngx-quill but found that there is a bit of a bug on iOS (works fine when simulating in browser but not on physical device or emulator on Mac). The problem is that clicking outside of the text editor does not “blur” and therefore the keyboard will not close.
This seem to be related to a problem with “contenteditable” and “blur” on iOS devices.
I have since been testing each of the rich text editors mentioned in this thread (apart from Froala because I cannot afford to pay what they want for an App license) by opening the demos of them in Safari on an iPad emulator on my Mac and the only one that I have found so far that seems to “blur” and close the keyboard when clicking outside of the text editor is Slate therefore I am going to see if I can get this integrated to see if it works well within my App.
Anyone else came across this issue, found a workaround or a better rich text editor for Ionic that can be used in Android and iOS, or anyone managed to get Slate integrated into their Ionic App?
@ekruep I know it’s been a while since you posted this, but I’m curious if you ever came to a solution? From my experience, Froala is the best WYSIWYG out there, but it comes with a steep price, especially if you want to use it in mobile. However, much like you, I’d like more of a “native” feel if possible. Thanks for sharing.
