Re: GWT tree Interact with WYSIWYG editor

[Leon Wang-2]

Hi Marius,
Since the first approach which is "1) edit the wysiwyg_createEditor velocity
macro from macros.vm" is simpler, I will modify macros.vm. You said "new
WysiwygEditor($jsVarName); with something like window["${fieldId}_editor"] =
new WysiwygEditor($jsVarName);" Could you please explain briefly what does
"window["${fieldId}_editor"]" mean? What is it for? Is it a function of
javascript? In the macros.vm I found "Wysiwyg.onModuleLoad(function() {new
WysiwygEditor($jsVarName); $jsVarName = undefined;});", I did not find any
"window" stuff.

So after the first step, I got the reference, is the reference stored
in window["${fieldId}_editor"]
variable?

Since don't depend at all on WYSIWYG Java code is not possible and do not
bring you more work, I think should go with  "i) access the editor in Java
(GWT) code by writing a simple native getter". For the code you provided
"[hidden email]::editor;"
I never saw code like this, is the @ for Java annotation or Component? Is
there any document I can read to learn about the related
rationale/knowledge? 'cause I have no clue what it means. So this line will
return the WYSIWYG editor's reference restored/declared in the macros.vm
file?

I tried to add a new page in the draft document for Loading GWT in Xwiki
page, It seems I can't add new page, only editing existing document. Should
I add something behind your "Writing GWT applications in XWiki", so you
could create a new one or something else. If there are work I can do to save
your time or to make Xwiki better, feel free to assign me the work. I am
more than happy to help.

Thank you for taking your time to help me!

-Leon
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs

[Marius Dumitru Florea]

Hi Leon,

Leon Wang wrote:
> Hi Marius,
> Since the first approach which is "1) edit the wysiwyg_createEditor velocity
> macro from macros.vm" is simpler, I will modify macros.vm. You said "new
> WysiwygEditor($jsVarName); with something like window["${fieldId}_editor"] =
> new WysiwygEditor($jsVarName);" Could you please explain briefly what does
> "window["${fieldId}_editor"]" mean? What is it for? Is it a function of
> javascript? In the macros.vm I found "Wysiwyg.onModuleLoad(function() {new
> WysiwygEditor($jsVarName); $jsVarName = undefined;});", I did not find any
> "window" stuff.

"window" is a predefined JavaScript object. See
http://w3schools.com/jsref/obj_window.asp . It has global scope so you
can access its properties everywhere. My suggestion was to save a
reference to the editor instance on the window object so that you can
access the editor later.

>
> So after the first step, I got the reference, is the reference stored
> in window["${fieldId}_editor"]
> variable?

You should be able access the editor using window['content_editor'] in
JavaScript.

>
> Since don't depend at all on WYSIWYG Java code is not possible and do not
> bring you more work, I think should go with  "i) access the editor in Java
> (GWT) code by writing a simple native getter". For the code you provided
> "[hidden email]::editor;"
> I never saw code like this, is the @ for Java annotation or Component? Is
> there any document I can read to learn about the related
> rationale/knowledge? 'cause I have no clue what it means. So this line will
> return the WYSIWYG editor's reference restored/declared in the macros.vm
> file?

That is GWT's JavaScript Native Interface (JSNI) notation. See
http://googlewebtoolkit.blogspot.com/2008/07/getting-to-really-know-gwt-part-1-jsni.html 
. Replace editorJSReference with window['content_editor'].

>
> I tried to add a new page in the draft document for Loading GWT in Xwiki
> page, It seems I can't add new page, only editing existing document. Should
> I add something behind your "Writing GWT applications in XWiki", so you
> could create a new one or something else. If there are work I can do to save
> your time or to make Xwiki better, feel free to assign me the work. I am
> more than happy to help.

I created
http://dev.xwiki.org/xwiki/bin/view/Drafts/LoadingGWTApplicationsInXWiki 
  for you.

Hope this helps,
Marius

>
> Thank you for taking your time to help me!
>
> -Leon
> _______________________________________________
> devs mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs

[Leon Wang-2]

Hi Marius,
I tried the the first way, "i) access the editor in Java (GWT) code by
writing a simple native getter", the dependency is killing me. I can not
compile it use eclipse the dependency is the way too complicated. I tried
use maven to build it, but I tried for a whole afternoon and I really don't
know how to write the correct pom to compile them together.

Could you please extend the native JavaScript API so that I can write
something like:
native void setBackgroudColor(String color)
/*-{
    editorJSReference.execute('backcolor', color);
}-*/;

Could you please also tell me what you did to extend the native JavaScript
API, so I can learn about how to save the location of highlighted sentence
to help software maintainer easily trace back to the high lighted document.
 If you want I can collect your reply and write document for you for this
one too.

Here is another problem, please see the screenshot:
http://picasaweb.google.com/freeleons/Xwiki#5394862411574232850  in the
WYSIWYG edit mode, the customized sidebar are disappeared, which means that
I can not use the GWT tree to interact with the WYSIWYG editor. Is there
anyway to keep the customized toolbar?

I have finished the document writeup here is the url:
http://dev.xwiki.org/xwiki/bin/view/Drafts/LoadingGWTApplicationsInXWik

You are literally saving my life. Thank you so much!
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs

[Marius Dumitru Florea]

Hi Leon,

Leon Wang wrote:

> Hi Marius,
> I tried the the first way, "i) access the editor in Java (GWT) code by
> writing a simple native getter", the dependency is killing me. I can not
> compile it use eclipse the dependency is the way too complicated. I tried
> use maven to build it, but I tried for a whole afternoon and I really don't
> know how to write the correct pom to compile them together.
>
> Could you please extend the native JavaScript API so that I can write
> something like:
> native void setBackgroudColor(String color)
> /*-{
>     editorJSReference.execute('backcolor', color);
> }-*/;

See http://jira.xwiki.org/jira/browse/XWIKI-4519

>
> Could you please also tell me what you did to extend the native JavaScript
> API, so I can learn about how to save the location of highlighted sentence
> to help software maintainer easily trace back to the high lighted document.
>  If you want I can collect your reply and write document for you for this
> one too.

See http://lists.xwiki.org/pipermail/notifications/2009-October/064059.html

But that won't help you. If you need to know where the selected text
starts and ends in the edited page then consider using the xwiki-gwt-dom
( http://svn.xwiki.org/svnroot/xwiki/platform/web/trunk/xwiki-gwt-dom/ )
module which offers a Range&Selection API. The WYSIWYG editor uses it.

In order to get the selection you have to:

(1) get the edited document

native org.xwiki.gwt.dom.Document getEditedDocument()
/*-{
     editorReference.getRichTextArea().contentWindow.document;
}-*/;

(2) use the Range&Selection API

Range range = document.getSelection().getRangeAt(0);

See https://developer.mozilla.org/en/DOM/Selection and
https://developer.mozilla.org/en/DOM/range .

>
> Here is another problem, please see the screenshot:
> http://picasaweb.google.com/freeleons/Xwiki#5394862411574232850  in the
> WYSIWYG edit mode, the customized sidebar are disappeared, which means that
> I can not use the GWT tree to interact with the WYSIWYG editor. Is there
> anyway to keep the customized toolbar?

Edit templates/editpanelsvars.vm

>
> I have finished the document writeup here is the url:
> http://dev.xwiki.org/xwiki/bin/view/Drafts/LoadingGWTApplicationsInXWik

Thanks,
Marius

>
> You are literally saving my life. Thank you so much!
> _______________________________________________
> devs mailing list
> [hidden email]
> http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
[hidden email]
http://lists.xwiki.org/mailman/listinfo/devs