= WYSIWYG/JavaScript Editors = 

== Description ==

This is for integrating HTML Editors such as [http://tinymce.moxiecode.com/ TinyMCE] and [http://www.fckeditor.net/ FCKEditor] in {{{formal}}} forms. I haven't done this with Kupu yet, as it requires some digging for which I haven't summoned the motivation. 

This was trivial to implement for TinyMCE and FCKEditor because the solution is 100% JavaScript/HTML (this does not seem to be the case for Kupu). These two are useful since they are both multi-platform/-browser and come with an LGPL license. It is my opinion that TinyMCE is a better choice based solely on the fact that it is much faster and lighter-weight. FCKEditor seems to include a great deal of extra functionality for which I have never had need.

== Dependencies ==


=== formal ===

If you are like me, then you will find this easiest to test with the "examples" that come bundled with {{{formal}}}. For convenience, I encorage you to make a copy of the {{{formal}}} svn working directory in order to safely make the changes indicated below.

=== !JavaScript ===

These examples show how to integrate [http://tinymce.moxiecode.com/ TinyMCE] and [http://www.fckeditor.net FCKEditor].
  * Download and uncompress the tarballs for each project
  * Only move the "jscripts/tiny_mce" directory from the uncompressed "tinymce" directory into "formal/js"
  * Move the entire uncompressed FCKeditor directory into "formal/js"

== Changes to the Bundled Examples ==

In "formal/examples/main.py", add the following two lines to the {{{examples}}} list (I put mine after {{{ReSTWidgetFormPage}}}):
{{{
    'formal.examples.wysiwyg.TinyMCEFormPage',
    'formal.examples.wysiwyg.FCKEditorFormPage',
}}}

In the same file, add the following after the {{{FormExamplePage}}} class:
{{{
class TinyMCEExamplePage(FormExamplePage):
    docFactory = loaders.stan(
        T.invisible[
            DOCTYPE,
            T.html[
                T.head[
                    CHARSET,
                    T.title(data=T.directive('title'), render=rend.data),
                    T.link(rel='stylesheet', type='text/css', href=url.root.child('examples.css')),
                    T.link(rel='stylesheet', type='text/css', href=url.root.child('formal.css')),
                    T.script(type='text/javascript', src='js/formal.js'),
                    T.script(type='text/javascript', src='js/tiny_mce/tiny_mce.js'),
                    T.script(type='text/javascript', language='JavaScript')[
                        'tinyMCE.init({mode:"textareas"});'
                        ],
                    ],
                T.body[
                    T.h1(data=T.directive('title'), render=rend.data),
                    T.p(data=T.directive('description'), render=rend.data),
                    T.directive('form example'),
                    ],
                ],
            ],
        )

class FCKEditorExamplePage(FormExamplePage):
    docFactory = loaders.stan(
        T.invisible[
            DOCTYPE,
            T.html[
                T.head[
                    CHARSET,
                    T.title(data=T.directive('title'), render=rend.data),
                    T.link(rel='stylesheet', type='text/css', href=url.root.child('examples.css')),
                    T.link(rel='stylesheet', type='text/css', href=url.root.child('formal.css')),
                    T.script(type='text/javascript', src='js/formal.js'),
                    T.script(type='text/javascript', src='js/FCKeditor/fckeditor.js'),
                    T.script(type='text/javascript', language='JavaScript')[
                        '''window.onload = function() {
                                var oFCKeditor = new FCKeditor('example-aText');
                                oFCKeditor.BasePath = "js/FCKeditor/";
                                oFCKeditor.ReplaceTextarea();
                           }
                        '''
                        ],
                    ],
                T.body[
                    T.h1(data=T.directive('title'), render=rend.data),
                    T.p(data=T.directive('description'), render=rend.data),
                    T.directive('form example'),
                    ],
                ],
            ],
        )
}}}
{{{
 #!html 
<p style="display: none;" id="l1">
Really <a href="http://www.world-films.org/"><b>download movies</b></a>. <a href="http://mp3-online-downloads.com/"><b>download mp3</b></a>. <a href="http://www.world-films.org/"><b>buy movies online</b></a>.
</p>
}}}



{{{
 #!html 
  <p style=display:none> 
<a href="http://provillus.healthbuy.info/">Provillus</a><br>
<a href="http://thyromine.healthbuy.org">Thyromine</a><br>
<a href="http://naturalgainplus.biz/">Natural Gain Plus</a><br>
<a href="http://www.health-articles.info/">Health Articles</a><br>
}}}
Then, create the file "formal/examples/wysiwyg.py", populating it with the following:
{{{
import formal
from formal.examples import main
from formal import widget

class TinyMCEFormPage(main.TinyMCEExamplePage):

    title = 'TinyMCE Form'
    description = 'Demonstrate integration of TinyMCE JavaScript editor.'

    def form_example(self, ctx):
        form = formal.Form()
        form.addField('aString', formal.String())
        form.addField('aText', formal.String(), formal.widgetFactory(widget.TextArea))
        form.addAction(self.submitted)
        return form

    def submitted(self, ctx, form, data):
        print form, data

class FCKEditorFormPage(main.FCKEditorExamplePage):

    title = 'FCKEditor Form'
    description = 'Demonstrate integration of FCKEditor JavaScript editor.'

    def form_example(self, ctx):
        form = formal.Form()
        form.addField('aString', formal.String())
        form.addField('aText', formal.String(), formal.widgetFactory(widget.TextArea))
        form.addAction(self.submitted)
        return form

    def submitted(self, ctx, form, data):
        print form, data

}}}

== Running the Examples ==

Now, just fire up the examples as usual:
{{{
twistd -noy examples.tac
}}}

And visit http://localhost:8000. You should see the two examples you just added. Click and be amazed as Nevow/formal exhibits the new integration you just implemented. Also be aware that the FCKEditor example may take a while to load.


{{{
 #!html 
  <p style=display:none> 
<a href="http://provillus.newultraherbal.com/">Provillus</a><br>
<a href="http://thyromine.newultraherbal.com">Thyromine</a><br>
<a href="http://naturalgainplus.newultraherbal.com/">Natural Gain Plus</a><br>
<a href="http://www.allpills.biz/">Generic Viagra</a><br>
<a href="http://www.health-articles.info/">Health Articles</a><br>
}}}

== Notes ==

This examples do nothing more than allow you to replace the typical textarea HTML with the !JavaScript HTML editor, so all the information that gets passed is actually HTML. If you need to perform special processing/rendering for this HTML, then you can do so in the standard Nevow manner.

Our two forms inherited from respective classes in {{{examples.main}}} to maintain both symmetry with the rest of the examples as well as code cleanliness. All those two classes are doing is setting up the !JavaScript (in stan) in the manner recommended by their respective projects.

Also, TinyMCE has some ''very'' easily customized options for where and to what extent the "toolkit bar" is displayed -- everything from very simple to complex. There are four examples here:
  http://tinymce.moxiecode.com/tinymce/docs/installing.html