simple rich text editor

twooldridge

The only way I've found to do RTE well is to use a webView widget (with modern web engine) with 2-way JS bindings that loads a HTML Library (CKEditor4 https://ckeditor.com/ckeditor-4/ is one but there are a bunch). 2-way JS bindings are essential if you need to get values longer than 255 characters. For Android/iOS...I customized CKEditor quite a bit to make it more appealing to end-users. I'll see if I can dig that stuff up (if you're interested).

my recommendation:

DO NOT use HTMLLoader or the WebView provided by AIR. You're wasting time on those (even on Desktop).
use the WebViewANE provided by tuarua for Windows/Mac/Android/iOS.
NOTE: you will have a different implementation of the webView for each platform. the concept seems simple to understand but the implications can be hard to appreciate.
Windows is the most challenging to setup & get working. If you need that platform, then I recommend you work on that first. iOS is a little challenging. Android/Mac are easy.
embed ckEditorLite (for mobile) & CKEditor (for Desktop) into the application directory of your application.
here's a sample MTextInput.html file I used to get going - https://assethound.box.com/shared/static/ploh51v5amp2aovtgtpy8jlo9ih4wpic.html.
load the file above from the applicationDirectory into the WebView.

this._file = File.applicationDirectory.resolvePath("ckeditor/samples/mTextInput.html");
webView.loadFileURL("file://"+this._file.nativePath, "file://"+File.applicationDirectory.nativePath);

set up your JS bindings.

The process is tricky the first time, but using this approach, I was able to create a RTE component for AIR App which is fast, responsive, and optimized for mobile.

I strongly recommend you use this approach vs anything if you want/need to support RichText editing.

pautay

Thanks a lot for sharing this Thomas =)
Actually this is exactly the way I was going through (ckeditor 4) ! The thing is that i faced very weird behavior that are hard to debug since i don’t have full hand on it. So that's why I was wondering if anything were possible directly with Feathers or native texts.
But with your recommendations, I think it may fix my problems.
I’m trying right now to implement the WebViewANE, that can be a trouble fix for sure.
It would be very cool for AIR community to have a nice RichText Editor because i think it’s a major lack for developers around here.

pautay

@Thomas : where are you getting the ckEditorLite? I'm only focusing on Mobile for my app. So the WebViewANE is working nice on my Android device, but i'm experimenting some weird behavior sometimes. for instance at init, when setup editor default text, if i'm push enter to break line, the editor actually break 2 lines and after that i need to backspace a bunch of time before it actually works...it's maybe about configuration of the editor, not sure. So if you have an editor that is working perfectly, i would be happy to know your settings params =)

pautay

ok got the problem, but don't know how to fix it...to avoid editor to add <p></p> tag when breaking lines, I use config.enterMode = CKEDITOR.ENTER_BR;
This is working but adding BR tag instead. So when i use backspace to delete, even if the line is empty it considers the tag to be here and continue to delete that tag...@Thomas, did you faced that kind of trouble and were you able to fix it ? :/
Notice that it's not happening on web browser, only on mobile device (I only tested Android for now)

twooldridge

I tried to find a feasible solution in Feathers/Native Texts & wasted a lot of time trying things. The closest I came was creating a simple markup text engine (like GitHub/StackOverflow does) that italicizes/underlines/boldens text but ran into platform-specific rendering problems (iOS vs. Android, etc). I decided to throw it away & just do a RTE in a WebView.

CKEditorLite - this was a library I customized quite a bit for mobile environments from CKEditor4. As it stands, the core library doesn't play nice with SoftKeyboards/fingers/digitizers. For starters, the formatting controls (by default) are at the top of the screen. This is fine for conventional desktop, but what happens when you select text on mobile or windows 10 tablets w/o a physical keyboard? a context-like menu pop-ups obscuring the line(s) directly above it, the line(s) where the text formatting controls are located. Not a good user experience. Yeah, I'll post the lib I created, no problem. It'll take a few days as I'm slammed right now.

My recommendation is to get those webViews working on each platform for release builds. Once you have that, then you're 90% of the way there.

twooldridge

oh, just realized I didn't answer 1 of your questions.

It's been a while since I implemented the RTE, but upon thinking about it, I remember now I faced a flock-ton of text entry problems on Android. Flippin' annoying. Text would disappear, characters would shift, parts of sentences would go blank. Ugh.

The problem wasn't tuarua's fault - I think it had something to do with attaching the webView to an AIR app. It's not the same as adding a WebView to an Activity in native code. AIR apps on droids run in a layer upon a layer (AVM w/in ART), and b/c the webView widget runs in a separate process with AIR & the UI can only be updated on the main thread...something in that caused a synchronization problem btw the UI in the main AIR process and that of the WebView process. The UI appears as a single app (which is what we want) BUT it's composed 2 different processes - AIR & the WebView. The Android Framework assumes they're independent of each other, but in our case, AIR "enslaves" the webView. The end result leads to a disjointed mess when updating the UI in the WebView. (DISCLAIMER: I don't know why there were so many text entry problems on Android - my explanation above is speculation as I don't know enough yet to substantiate my claims.)

There was a trick I did to get it working for Marshmallow/Nougat. I never did iron out the wrinkles on Lollipop tablets; at the time - this was _7/8 months ago - the majority of users were on API 23/24/25. Around _5% of my user-base had lollipop (5.0.x & 5.1.x) then. So, I just didn't display the WebView below API 23.

On Windows/Mac desktops, CKEditor on WebView worked great.
On Windows 10 tablets, CKEditorLite in WebView worked great.
On iOS, CKEditorLite in WebView worked great, albeit I don't have a lot of iOS users using the RTE.
On Android, CKEditorLite in WebView worked ok with some bandaids.

If I had to do it over again on Android, I'd create a custom Android Native extension that would display a full-screen RTE. You can build a RTE pretty easily in Kotlin/Java.

Anyway, I apologize for not answering your question with my previous response; it's been a while since I did this. I'll post the goodies in a few days.

pautay

Thanks a lot for your precious help. This give me good advices on best direction to go. On my side, i took the very last version of CKEditor 4 and took very basic tool because i don't need a full rich text editor, only bold, italic, underline and list (at least for now) so i removed annoying stuff such as whid popups, hover state on tool buttons (which triggered a display glitch) and with that the only bug left is the backspace issue (well at least on my device) So i fixed the BR tag issue by setting up paragraph (P tag) and change style for it p{margin:0px} to avoid big line height. the only thing i'm still struggling with are the others tags B, I, U, etc. since the backspace consider tags as texts and delete them before erase the word itself...(only in the webview since no bug if i launch editor directly in my chrome browser) so the result is the pointer not moving before you hit the backspace a bunch of time...

pautay

One other thing that give me trouble, i'm not able to load local files from the applicationDirectory on Android, this looks to fail :

var file : File = File.applicationDirectory.resolvePath("ck-editor/editor.html");
_webView.loadFileURL("file://"+file.nativePath, file://"+File.applicationDirectory.nativePath);

do you have any clue on that ?

pautay

Also, i'm trying to get it work on iOS now, but i have crash at app init... :/ maybe you remember the trick to avoid that ?

twooldridge

I think AIR has a bug with nativePath on Android (but not iOS or the other platforms) for the applicationDirectory. When it's applicationDirectory, invoking 'this._file.nativePath' yields '' , thus 'url' = 'file://' as the argument to the webView.loadFileURL(...args).

I might have copied the CKEditor Library to the applicationStorageDirectory & loaded it from there on Android.

var file : File = File.applicationDirectory.resolvePath("ck-editor/editor.html");
if (!file.exists)
{
    trace("error, file not exists");
    trace('file.nativePath:',file.nativePath);
    if (DEBUG) throw new IllegalStateError(file.nativePath+" doesn't exist! cannot load editor");
}
this._webView.loadFileURL(...);

if you're sure you're packaging the library into the applicationDirectory on Android, but you're having trouble loading it in the webView...then try copying the files to the applicationStorageDirectory and loading it into the WebView from there. I hope that makes sense. I'm going from memory here.

I'll get back with you on the iOS bug.

rodrigo

I think it should be possible to "build" a basic text editor, although it will require a lot of custom work.
Basically, put a StageText outside the screen, maybe use a TextField as a viewer, and assign
focus on the StageText when the viewer is "touched",
reading the touch coordinates, and workaround the text cursor (a custom DisplayObject) over that.
Detect if you touch the same coordinates twice, will dispatch a "selectRange" of the word, which indices should be calculated, or display a tooltip with the "text actions"... is like implementing the StageText render class by yourself, OS agnostic 😛

Bah, to be honest, idk how many issues you will face between iOS/Android.

pautay

Thomas : yes you are right Android needs to copy the files... the thing is that i also have ShareObjects in my App, so when i'm copying editor files, it erases my save files (User prefs) :/ tricky !...Also copy files is very greedy and freeze my device for a bunch of secs so i would be so happy to avoid that kind of things ^^
Thanks for the iOS bug, i think i miss something with the dependencies but i don't know what exactly...i also asked to the ANE guys
rodrigo : Yes you maybe right, i might should have start directy with that solution if i knew the pain it was ^^' but not sure we won't find big walls with that approach, i don't have enough time to test it now unfortunatly but maybe later i will give a try.

twooldridge

so just copy the files to a subfolder within applicationStorageDirectory. shouldn't need to overwrite your other data. copy it asynchronously or setup a worker. Workers on Android aren't that bad. they're an absolute b1tch on iOS tho.

should go something like this...

// copy files from applicationDirectory to applicationStorageDirectory
var f:File = File.applicationDirectory.resolvePath("ckeditorLite");
if (f.exists)
{
   var f2:File = File.applicationStorageDirectory.resolvePath("ckeditorLite");

   // don't copy it if you've already done so
   if (f2.exists) return;

   // this will take 30secs to a minute
   f.copyToAsync(f2, true);
   trace("copying files to applicationStorageDirectory…");

   // don't do this on mobile
   if (data.os === Main.DROID) return;

   File.applicationStorageDirectory.openWithDefaultApplication();
}

twooldridge

@rodrigo: Personally, I tried this & wasted a lot of time doing so. StageText is an absolute mess & the problem is compounded by the fact that these issues platform-specific. If it wasn't insanely difficult/impossible, I believe the Great Josh Tyngala would already have done it - I mean he already stated there's no good way to support this in starling/feathers.

pautay

ok i'll test that, thanks 🙂

rodrigo

@Thomas, you bet, StageText is an inconsistent mess and something extremely tedious to deal with!

Maybe Josh tried what I suggested, and for sure, if that implementation is possible, it will be really difficult to implement and you will lose the few benefits that StageText has.

I will give it a try on my end, at least for a basic implementation of plain text edition, there’s no specific need to use Starling/Feathers as a starting point for this anyway.

Can you tell me how was ur approach when u tried to build ur editor?

twooldridge

@rodrigo, I hope I wasn't harsh in my previous comment. In the midst of a blizzard which knocked out my primary power source & was a bit cranky.

I created a little markup engine (think GH/StackOverflow) for bold/italics & some other controls. I'll put it up on GH in a few days - I couldn't find it just now & I don't have time to look for it. slammed at the moment. this was _7/8 months ago.

rodrigo

No worries @Thomas, I know how stressful is to deal with deadlines and when something gets so fucked up like StageText... well, i get it.

I thought u were coding a text editor, with live text format for mobile.
Like iOS11 Notes.app ...

twooldridge

The client requested rich text editing, but he didn't want to pay for the all the bells & whistles. He cared about (1) bold/italics/bullets/lists & a few other formatting options (2) all other tags would be invisible and not overwritten if/when the user edited the content.

The markup engine was a nice compromise - it met the requirements of the user - but I decided it wasn't the optimal solution after banging away on it for a few days.

Hence, I chose the webView as my solution.

rodrigo

Guys, I kinda made a super quick (and messy) demo to prove the concept and works on iOS.
(doesn't even have scroll yet)