Hi Leon,

Leon Wang wrote:
> Hi Everyone!
> I have read this document "Writing GWT applications in XWiki"  (
> http://dev.xwiki.org/xwiki/bin/view/Drafts/WritingGWTApplicationsInXWiki)
> And I know how to develop GWT module for xwiki now. I also have read the
> document "WYSIWYG Editor Module" (
> http://code.xwiki.org/xwiki/bin/view/Modules/WysiwygEditorModule). I
> followed the instruction which tried to integrate the WYSIWYG editor(GWT
> application) in wiki pages, and I put the following code in my wiki editor:

> "{{html}}
> <script type="text/javascript" src="XWikiWysiwyg.js"> alert('WYSIWYG code is
> loaded!'); </script> <textarea id="demo"></textarea> <script
> type="text/javascript"> Wysiwyg.onModuleLoad(function() { new
> WysiwygEditor({hookId:'demo'}); alert('WYSIWYG code is loaded!'); });
> Wysiwyg.onModuleLoad(function() { editor = new WysiwygEditor({hookId:
> 'demo'}); }); }); </script> {{/html}}"

I updated the WysiwygEditorModule page and I also added a full example 
at the end. Please take a look.

> 
> After saved, it only display a blank text area without any sign of WYSIWYG
> editor, also there is no alart 'WYSIWYG code is loaded!' popup. Can you help
> me figure it out what is wrong with it?

First of all, you should install Firebug Firefox extension. It is very 
useful for detecting JavaScript exceptions. Your code snipped doesn't 
work mainly because the path to XWikiWysiwyg.js isn't specified. See the 
updated WysiwygEditorModule page. Then you'll have to clean your code a 
bit since the editor is loaded twice and there is a closing '});' at the 
end without any opening '({'. See the example I added at the bottom of 
the WysiwygEditorModule page.

> 
> I am planing to develop a tree view using GWT to display Design Rationale
> Element. Could you give me some ideas of after my development, how can I
> embeded the GWT application into Xwiki pages and interact with the GWT
> application?

First you have to include the JavaScript file generated by GWT for your 
application:

{{velocity}}
$xwiki.jsfx.use("path/to/YourModuleName.nocache.js")
{{/velocity}}

I created a special bootstrapper for the WYSIWYG editor that allows me 
to load it on demand. You might not need this. In case you do, see 
http://tinyurl.com/yan4433 .

Then, if your GWT application has a service servlet you'll have to 
register it in the WEB-INF/web.xml file.

By default, GWT applications load when the host HTML page loads and you 
don't have access from JavaScript to the GWT-compiled code (which is 
most of the time obfuscated). In order to create your tree widget from 
JavaScript on demand you'll have to expose a JavaScript API from GWT. 
Take a look at http://tinyurl.com/yaqdkqg to see how I did it. So 
instead of loading the application on ModuleName.onModuleLoad() I just 
publish the JavaScript API which allows me to instantiate the editor 
later (see http://tinyurl.com/y896uag ).

Of course you can keep it simple and load your tree when the page loads. 
In the first versions of the GWT-based WYSIWYG editor the 
Wysiwyg.onModuleLoad method was creating an editor instance for each 
'window.WysiwygXXX' JavaScript object found. These objects contained the 
editor configuration. You could so something similar.

Hope this helps,
Marius

> 
> Thank you very much!
> 
> Leon
> _______________________________________________
> devs mailing list
> [email protected]
> http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/devs

Reply via email to