How to get native Rich Text Editor on Ionic app?


#1

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:

(Android): https://github.com/wasabeef/richeditor-android
(iOS): https://github.com/cjwirth/RichEditorView

Is this an advisable approach?

Are there alternatives you’d recommend to achieve the same result?


#2

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.


#3

I did a lot of research into this topic not so long ago.

I had some experience working with: https://codemirror.net/

I played around with:

I also liked Slate (but it was in beta at the time): https://github.com/ianstormtaylor/slate

As @AaronSterling mentioned you should have a look at solutions like:

And:

A curated list of awesome WYSIWYG editors: https://github.com/JefMari/awesome-wysiwyg


Best WYSIWYG editor for Ionic (with video and photos options)
iOS selectable text and highlight issue
#4

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?


#5

I don’t have personal experience with Froala, sorry.


#6

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?


#7

FWIW - the first thing I’d look at would be the ngx-quill npm package.


#8

I’m not sure why I didn’t take Quill for a test drive :slight_smile:

See:


#9

ProseMirror : https://open.nytimes.com/building-a-text-editor-for-a-digital-first-newsroom-f1cb8367fc21