My TLF Editor

hugo

Hello,

I completed my TLF Editor.
It was weeks of development without previous experience with TLF.

The features are:
* Ruler: left, right and tab stops;
* Zoom;
* Multi-page;
* Undo and redo;
* Print;
* Font: name and size;
* Style: bold, italic and underline;
* Justify: left, center, right and full;
* Vertical space;
* Quote selected text;
* Lists: bullets and numbers;
* Color: background and forecolor;
* Add links;
* Add images: text surrounding left, right and no surrounding, width e height - this one required patch to TLF framework to support saving and loading in base 64 format;
* Page alignment: top, base, left and right;
* Lock line (leader dots): dots, dash and underscore with support for line and paragraph - this is a complete new feature that I developed to TLF framework;
* Spell cheching: none, PT-PT, PT-BR, ES-ES, EN-GB and EN-US;
* Search and replace.

A few screenshoots:
Screenshoot 1: https://www.dropbox.com/s/hralljakhm0gyxm/1.png?dl=0
Screenshoot 2: https://www.dropbox.com/s/uwg6vab2q6jxvjq/2.png?dl=0
Screenshoot 3: https://www.dropbox.com/s/ewkklvtgjqbem71/3.png?dl=0
Screenshoot 4: https://www.dropbox.com/s/zuqk03ywse1x4bj/4.png?dl=0

pautay

Hello Hugo,

Congrats for your work it looks very cool!
So this is only for desktop use right? Or is this working on Mobile as well ?

hugo

Hello pautay,

Thanks.

This is a component for desktop (it's my current need) however I may create a mobile version in future but I think that on mobile makes more sense for tablets.
If in a near future I create a mobile version, I can post here new picture.

My workflow is a Core framework (independent on the workload), where I have my TLF Core that extendes from TLF Flex Framework, a desktop framework, a mobile framework and on the top of that the applications for desktop or mobile.

So a mobile version of this would require a complete new TLF editor layout for mobile but the core features are already there.

pautay

I'm desperately looking for a very basic RichTextEditor (only bold, italic and underline) for Mobile, do you think it's possible to extract easily that module ? i would be very interested 🙂

hugo

On your case my suggestion is not use TLF.
IMHO, TLF is not the right tool for that job.
TLF is powerful and should be used only if you need it.

For simple things (basic editor with bold, italic and underline), my suggestion is: spark.components.RichTextEditor
See this example: https://www.dropbox.com/s/qp8uvjaiqcaymdl/BasicRichTextEditor.png?dl=0

This is Flex, not Starling so I don't know if meets your needs.

pautay

yeah, my tests on TLF weren't positive at all, i thought maybe you found a magic trick 😃 I think the only way to go is a webview with external RichTextEditor such as ckeditor...but i experiment bugs acccording to device specifications now (especially android)...this thing is a real pain but i have to find a working solution since this is the heard of the app!
thanks anyway for your time, and again, great job for your Editor!

gakkos

Thank you very nice you are king

gakkos

Download link?

hugo

@pautay

People that tried TLF complained because they used to the easy to use Flex framework.
TLF engine seems to complex at a first look and from my prespective this complexity also allow to do things that a closed box would not.
Also, there isn't a text editor for TLF out-of-the-box and perhaps this is the main problem.

I needed an editor component as a part of a bigger application but I needed features that I can't find in any simplier text editor, so on my case TLF it's the right tool because the workaround would be ms word automation that is not good for me (perhaps an ANE, tied to word, non OS compatibility, etc ...) but would be the most powerful solution.

On your case (basic editor with bold, italic and underline), use TLF it's like to kill a mosquito with a cannon.
Try spark.components.RichTextEditor: http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex

@gakkos

My first approach was to start from an existing editor and I searched and searched for days without sucess.
My second approach was to pay someone to do it on several sites (including this one), for one third of the features and I got ridiculos budgets of several thousands dollars.
My last approach was to do it myself. It's specific for my project, however I needed to enter on the TLF engine and completed the Image support, adding loading and saving base 64 string support and also add a complete new feature for dot/dash/underscore leader (this it's not even support at RTE level) and I can see this feature only on text processing applications as ms word.
The source code of this 2 new features was already donated to Apache Flex community (JIRA).
This is my first version but I may add more feutures in a near future as rotate image, drag-drop, etc ... and this core features will also be donated as they are developed.

pautay

Thank you for your advices. I feel now that the better way to make RTE with Starling is Webview even if there are still things that are total pain, it's the best i found with all my research.
I did take a look to spark.components.RichTextEditor : https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichText.html
But as you can see in the orange slot, it's not a good idea to use it for mobile =)

hugo

You welcome.

Honestly, I never tried because I never needed however in past I used the Flex charts that are not recomended (not optimized for mobile and never migrated to spark and never faced issues).

Since it's a simplier thing as you mention before, than you could give a try on a older mobile device to see how it behavs but if you already find out a way, better for you.

hugo

https://youtu.be/ZwK-yf7mfPc

Finally, my final 1.0 release (beta) of my TLF Editor.
Features on this 1.0 release:
* Templates: add, edit, clone and delete;
* Undo, redo, preview, generate PDF without native print, print, generate full PDF-A with print;
* Ruler;
* Font, size, horizontal align, vertical align, quote, bullet list, numeric list, background color, foreground color;
* Hyperlink, insert and edit images (text surrounding at right, text surrounding at left, no text surrounding, full x, y position with watermark full supported);
* Page left, right, top, bottom position with full save and load persistence;
* Leader dots (dash and underscore alternatives);
* Spell cheching: none, PT-PT, PT-BR, ES-ES, EN-GB and EN-US;
* Search and replace;
* Variables (replaced by data when preview, export and print).

rodrigo

Congrats Hugo,
nice screencast and the features seems very interesting.

Doesn't use Starling/Stage3D, right?

hugo

No, it uses Apache Flex + AIR.
There is no server side dependency (even for generating PDF's).