Hi Leon,

Guillaume Lerouge wrote:
> Hi Leon,
> 
> On Fri, Oct 16, 2009 at 8:22 AM, Leon Wang <[email protected]> wrote:
> 
>> Hi Everyone, Hi Marius,
>> I have successfully load my GWT tree on to the Xwiki page. I met a new
>> problem which is that I cannot add the background color button to the
>> toolbar of WYSIWYG editor. I have read the document:
>>
>> http://platform.xwiki.org/xwiki/bin/view/AdminGuide/WysiwygEditor#HXWikiPreferences
>>  and I tried two ways, first is to edit templates/macros.vm I edited this
>> line:  toolbar: '$xwiki.getXWikiPreference("wysiwyg.toolbar", "bold italic
>> underline strikethrough backcolor teletype | subscript superscript |
>> unorderedlist orderedlist | outdent indent | undo redo | format fontname
>> fontsize forecolor backcolor | hr symbol | link unlink | importer")',  No
>> matter where I put "backcolor forecolor" it just would not show up.
>>
> 

> You simply forgot to add "color" to the "plugins" line (it's right above the
> "toolbar" line).

I guess this is not well explained in the documentation. Leon, can you 
improve it to make it more explicit?

> 
> 
>> Second I added wysiwyg.toolbar as String property to Xwiki.preferences
>> class, and edit the Xwiki.preferences in the object editor and I put bold
>> italic underline strikethrough teletype | subscript superscript |
>> justifyleft justifycenter justifyright justifyfull | unorderedlist
>> orderedlist | outdent indent | undo redo | format | fontname fontsize
>> forecolor backcolor | hr removeformat symbol as value of wysiwyg.toolbar,
>> please see the screenshot for what I did:
>> http://picasaweb.google.com/lh/photo/yi-zwcDtr4ibfePckJ56tg?feat=directlink
>> After that the background colorWYSIWYG editor still does not appear. please
>> see the screen shot:
>> http://picasaweb.google.com/lh/photo/I1ALHBmG7YjGanyDT8i3kw?feat=directlink
>> Could
>> you give me some ideas what was wrong?
>>
> 
> See above.
> 
> 
>> I successfully load my GWT tree view to Xwiki right side pannel(Thank you,
>> Marius.) I want to make it interact with WYSIWYG editor. For example, if
>> user highlighted one sentence from a document in the WYSIWYG editor and
>> clicked on one node of the GWT tree say "Argument", then it will set the
>> highlighted sentence's background yellow(or blue). Could you give me some
>> ideas how can I make the tree interact with WYSIWYG editor like that?

First you have to get a reference to the WYSIWYG editor instance. 
Currently we don't save such a reference when we create the editor to 
edit the page content. You have two options:

1) edit the wysiwyg_createEditor velocity macro from macros.vm and replace:

new WysiwygEditor($jsVarName);

with something like

window["${fieldId}_editor"] = new WysiwygEditor($jsVarName);

Of course, you can name the reference as you wish.

2) use prototype to catch the "xwiki:wysiwyg:created" custom event which 
  should have a property called "instance" that points to the newly 
created WYSIWYG editor. Prototype gurus should be able to provide more 
help here.

Once you have a reference to the WYSIWYG editor you can interact with it 
in two ways:

i) access the editor in Java (GWT) code by writing a simple native 
getter like:

native WysiwygEditor getEditor()
/*-{
     return 
editorjsreferen...@com.xpn.xwiki.wysiwyg.client.editor.wysiwygeditorapi::editor;
}-*/;

NOTE: This forces your application to depend on the WYSIWYG code which 
means your compile time will increase and the resulting JavaScript code 
will include the WYSIWYG code. This way the editor JavaScript code will 
be duplicated.

If you want to go this way then you can change the background color of 
the selected text with this:

getEditor().getRichTextEditor().getTextArea().getCommandManager().execute(Command.BACK_COLOR,"yellow");

ii) use the editor JavaScript API and don't depend at all on WYSIWYG 
Java code. This is not possible right now but I can extend the native 
JavaScript API so that you can write something like:

native void setBackgroudColor(String color)
/*-{
     editorJSReference.execute('backcolor', color);
}-*/;

Let me know if you needs this.

Hope this helps,
Marius

>>
>> Thank you for your help! Really appreciate it!
>> _______________________________________________
>> 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