5 Oct
2009
5 Oct
'09
11:41 a.m.
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
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs