Best Way to RICH HTML Editor on Air Desktop

[gonMiguel]

Hi, actually i trying to get an WYSWYG editor to work on air.

Something like tinyMCE / ckeditor ( Like the one i´m using while writing this question).

I want to paste images there and work with tables  too...

For the moment, what i found is that i should use an stageWebView to load an html .... 

I made a html page and uploaded to my server.

It works if i go to the page via browser, but when i try to load it to the stagewebview , the editor is not there...

I´m flash CS6 and air desktop 3.9

Any idea on how this can be achieved ? Maybe another aproach ? Any component out there ?

Thanks in advance,

Gonçalo Miguel

[sinious · Accepted solution]

I would initially assume it's not working because TinyMCE may think it's running from the wrong path. The same way you must configure most of those editors to know "relatively" where its files are, TinyMCE may simply not be able to find its libraries. For example if you're using an invalid relative include like <script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> where <your installation path> is incorrect.

A quick way to find out is simply point to the script with a full address, http://www.yoursite.com/<your installation path/tinymce/tinymce.min.js

Just tried it quick, works for me:

And running local using File (with a wrapper HTML):

[gonMiguel]

Yes,

actually that was not the only problem, but help in the finding the awser .

Thank you

Very good,

so that we can share data between that view and as3 code with stageWebViewBridge !

[sinious]

You're welcome and for the others sake perhaps you'd like to share your findings. Was it simply addressing files with the File class in AIR or was it using Pedro's SWVB class?

[gonMiguel]

Actually i´m not using local tiny, so i implemented with:

webView.loadURL( "http://www.myserver.com/myHTMLtinyMCE.html") ;

For loading the tinyMCE into the StageWebView,

And then in myHTMLtinyMCE.html i have

tinyMCE.activeEditor.getContent() ;

to get the content of the TinyMCE , and send it to AS3 via StageWebViewBridge (https://code.google.com/p/stagewebviewbridge/)

StageWebViewBridge.call('fnCalledFromJS', null, { content:tinyMCE.activeEditor.getContent()});

But that local file example you sent was nice and clear, and i think that´s better to have it locally.

As i´m doing this as a part time project, if i have time for it i will make an online tutorial on this.

Thanks for your help.

[sinious]

Anything you can keep internal to a desktop application is desirable. If the users internet connection is weak or offline they'll still be able to use it.

I did like StageWebViewBridge, just be careful because Pedro hasn't touched it since 2011, which is quite a few AIR SDK updates. I loved his solution but since my needs were for iOS I went with Darkredz UIWebView ANE which is updated and I can say works excellent.

You're welcome and good luck!

[gonMiguel]

I was thinking if it´s possible to transform this into a component.

But i don´t know if components can have html js included.

I will check this.

Fortunatelly, the StageWebViewBridge is working with adobe air 3.9 for desktop

[sinious]

I don't believe the complexity of something like TinyMCE will fit in with a component given it relative paths itself to so many various files. You'd almost need to rewrite all the portions that load external assets to get the assets internally in Flash, inject HTML directly into StageWebViewBridge, etc.

A comprehensive but basic overview of AS3 component building is here: http://www.adobe.com/devnet/archive/flash/articles/creating_as3_components.html