10 May
2010
10 May
'10
10:13 a.m.
Marius wrote:
* Inherit the WYSIWYG GWT module in your own GWT module descriptor
** Use the same entry point as the WYSIWYG GWT module, which publishes
a JavaScript API you can use to instantiate the editor, or
** Use your own entry point and instantiate the editor in GWT code
How would I instantiate the editor in GWT code? I've been trying to
achieve this, but I get an editor that will not accept typing. That
is, typing characters into the editor has no effect; the characters
don't display, and there is no change to the state of the editor in
the DOM. I figure it must be something to do with the way I'm creating
it.
10 May
10 May
11:54 a.m.
New subject: [xwiki-devs] Running wysiwyg GWT editor as standalone
Hi David,
On 05/10/2010 11:13 AM, David Pinn wrote:
Marius wrote:
* Inherit the WYSIWYG GWT module in your own GWT module descriptor
** Use the same entry point as the WYSIWYG GWT module, which publishes
a JavaScript API you can use to instantiate the editor, or
** Use your own entry point and instantiate the editor in GWT code
How would I instantiate the editor in GWT code? I've been trying to
achieve this, but I get an editor that will not accept typing. That
is, typing characters into the editor has no effect; the characters
don't display, and there is no change to the state of the editor in
the DOM. I figure it must be something to do with the way I'm creating
it.
You can use either the RichTextEditorController, which manages a
RichTextEditor (menu bar + tool bar + rich text area) and a set of rich
text area plugins, or the WysiwygEditor which extends the
RichTextEditorController with the ability to switch to source (plain
text area).
The WysiwygEditor constructor does this:
super(new RichTextEditor(), config, pfm,
svm.getSyntaxValidator(config.getParameter("syntax", DEFAULT_SYNTAX)));
You can look in the WysiwygEditorFactory to see how to create a
PluginFactoryManager and a SyntaxValidatorManager.
As for the Config object, the WysiwygEditorApi does this:
Config config = new DefaultConfig(jsConfig);
which creates a configuration object from a JavaScript object (uses
GWT's Dictionary class behind the scenes). Configuration options are
listed on
http://platform.xwiki.org/xwiki/bin/view/AdminGuide/WysiwygEditor (most
of them are plugin related)
Can you show me how you instantiate the editor? It's hard to understand
the problem without seeing the code.
Hope this helps,
Marius
10:40 p.m.
New subject: [xwiki-devs] Running wysiwyg GWT editor as standalone
Thanks Marius.
My edit button does this:
edit.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Config config = new DefaultConfig(getEditorConfig());
WysiwygEditor editor =
WysiwygEditorFactory.getInstance().newEditor(config);
editorContainer.setWidget(editor.getUI());
}
});
... I create the config with this native method:
private static final native
org.xwiki.gwt.dom.client.JavaScriptObject getEditorConfig() /*-{
return {hookId:'editor', syntax: 'xwiki/2.0'};
}-*/;
... and my GWT UiBinder file has this:
<textarea id="editor" class="{style.editor}" />
<g:FocusPanel ui:field="editorContainer" />
Upon further investigation, it turns out that Firefox reveals
different behavior. In FireFox, I get a visible editor, but each of
the toolbar widgets occupy an entire row, stretching right across the
page. In Google Chrome, the editor appears without any toolbar
widgets, and is not editable.
By the way, is the 'hook' element needed? I know that I can embed a
normal GWT RichTextArea into the UiBinder file as: <g:RichTextArea ...
/>. Can the XWiki RichTextEditor work in a similar fashion, or does it
always need the hook element?
David
On 10 May 2010 19:54, Marius Dumitru Florea
<mariusdumitru.florea(a)xwiki.com> wrote:
Hi David,
On 05/10/2010 11:13 AM, David Pinn wrote:
Marius wrote:
* Inherit the WYSIWYG GWT module in your own GWT module descriptor
** Use the same entry point as the WYSIWYG GWT module, which publishes
a JavaScript API you can use to instantiate the editor, or
** Use your own entry point and instantiate the editor in GWT code
How would I instantiate the editor in GWT code? I've been trying to
achieve this, but I get an editor that will not accept typing. That
is, typing characters into the editor has no effect; the characters
don't display, and there is no change to the state of the editor in
the DOM. I figure it must be something to do with the way I'm creating
it.
You can use either the RichTextEditorController, which manages a
RichTextEditor (menu bar + tool bar + rich text area) and a set of rich
text area plugins, or the WysiwygEditor which extends the
RichTextEditorController with the ability to switch to source (plain
text area).
The WysiwygEditor constructor does this:
super(new RichTextEditor(), config, pfm,
svm.getSyntaxValidator(config.getParameter("syntax", DEFAULT_SYNTAX)));
You can look in the WysiwygEditorFactory to see how to create a
PluginFactoryManager and a SyntaxValidatorManager.
As for the Config object, the WysiwygEditorApi does this:
Config config = new DefaultConfig(jsConfig);
which creates a configuration object from a JavaScript object (uses
GWT's Dictionary class behind the scenes). Configuration options are
listed on
http://platform.xwiki.org/xwiki/bin/view/AdminGuide/WysiwygEditor (most
of them are plugin related)
Can you show me how you instantiate the editor? It's hard to understand
the problem without seeing the code.
Hope this helps,
Marius
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
11 May
11 May
9:42 a.m.
New subject: [xwiki-devs] Running wysiwyg GWT editor as standalone
On 05/10/2010 11:40 PM, David Pinn wrote:
Thanks Marius.
My edit button does this:
edit.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Config config = new DefaultConfig(getEditorConfig());
WysiwygEditor editor =
WysiwygEditorFactory.getInstance().newEditor(config);
editorContainer.setWidget(editor.getUI());
}
});
... I create the config with this native method:
private static final native
org.xwiki.gwt.dom.client.JavaScriptObject getEditorConfig() /*-{
return {hookId:'editor', syntax: 'xwiki/2.0'};
}-*/;
... and my GWT UiBinder file has this:
<textarea id="editor" class="{style.editor}" />
<g:FocusPanel ui:field="editorContainer" />
Looks fine.
Upon further investigation, it turns out that Firefox
reveals
different behavior. In FireFox, I get a visible editor, but each of
the toolbar widgets occupy an entire row, stretching right across the
You have this problem because not all the CSS files are imported. The
WYSIWYG editor uses one style sheet for the edited content
(RichTextArea.css) and multiple style sheets for the UI (
http://svn.xwiki.org/svnroot/xwiki/platform/web/trunk/xwiki-gwt-wysiwyg-cli…
). Initially Wysiwyg.css was importing all the other UI style sheets,
but we changed this in order to optimize the loading time. Currently,
all the UI style sheets are merged into Wysiwyg.css at build time (in
xwiki-gwt-wysiwyg-server module, which compiles the GWT code and
packages the editor resources).
The CSS files are not merged in your case and thus the styles are
partially imported. Check
http://svn.xwiki.org/svnroot/xwiki/platform/web/trunk/xwiki-gwt-wysiwyg-ser…
(look for yuicompressor-maven-plugin) to see how we merge the CSS files.
Alternatively, you can manually include all the style sheets from
http://svn.xwiki.org/svnroot/xwiki/platform/web/trunk/xwiki-gwt-wysiwyg-cli…
(except RichTextArea.css).
page. In Google Chrome, the editor appears without any
toolbar
widgets, and is not editable.
This is strange. Although the WYSIWYG editor is not fully supported on
Chrome (I didn't have enough time to test and fix the problems), it
should work decently. What version of the WYSIWYG editor and Chrome
browser are you using?
By the way, is the 'hook' element needed? I know that I can embed a
normal GWT RichTextArea into the UiBinder file as:<g:RichTextArea ...
/>. Can the XWiki RichTextEditor work in a similar fashion, or does it
always need the hook element?
The hook element is used for two reasons:
(1) to know where to insert the editor
We don't use the UIBinder (yet) so we need the hook element to determine
where to insert the WYSIWYG editor in the host HTML page. The editor is
inserted just before the hook element.
Looks like you don't require this use case.
(2) to make the rich text area submittable
The rich text area uses an in-line frame behind the scenes, which is not
a submittable element. We need a form element, like a plain HTML text
area, for this. The submit plugin saves the content of the rich text
area in the hook element's value property each time the rich text area
looses the focus.
If you don't plan to use the WYSIWYG editor in an HTML form, then you
won't require this use case also.
You can argue the WYSIWYG editor can generate its own hidden plain HTML
text area for this purpose, but this solution doesn't degrade gracefully
when JavaScript is disabled. The best solution is to put a plain HTML
text area in the host HTML page, which will be replaced by the WYSIWYG
editor if JavaScript is enabled (and other constraints are satisfied).
Hope this helps,
Marius
David
On 10 May 2010 19:54, Marius Dumitru Florea
<mariusdumitru.florea(a)xwiki.com> wrote:
Hi David,
On 05/10/2010 11:13 AM, David Pinn wrote:
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs Marius wrote:
* Inherit the WYSIWYG GWT module in your own GWT module descriptor
** Use the same entry point as the WYSIWYG GWT module, which publishes
a JavaScript API you can use to instantiate the editor, or
** Use your own entry point and instantiate the editor in GWT code
How would I instantiate the editor in GWT code? I've been trying to
achieve this, but I get an editor that will not accept typing. That
is, typing characters into the editor has no effect; the characters
don't display, and there is no change to the state of the editor in
the DOM. I figure it must be something to do with the way I'm creating
it.
You can use either the RichTextEditorController, which manages a
RichTextEditor (menu bar + tool bar + rich text area) and a set of rich
text area plugins, or the WysiwygEditor which extends the
RichTextEditorController with the ability to switch to source (plain
text area).
The WysiwygEditor constructor does this:
super(new RichTextEditor(), config, pfm,
svm.getSyntaxValidator(config.getParameter("syntax", DEFAULT_SYNTAX)));
You can look in the WysiwygEditorFactory to see how to create a
PluginFactoryManager and a SyntaxValidatorManager.
As for the Config object, the WysiwygEditorApi does this:
Config config = new DefaultConfig(jsConfig);
which creates a configuration object from a JavaScript object (uses
GWT's Dictionary class behind the scenes). Configuration options are
listed on
http://platform.xwiki.org/xwiki/bin/view/AdminGuide/WysiwygEditor (most
of them are plugin related)
Can you show me how you instantiate the editor? It's hard to understand
the problem without seeing the code.
Hope this helps,
Marius
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
10 May
10 May
11:30 p.m.
New subject: [xwiki-devs] Running wysiwyg GWT editor as standalone
Ahh! of course, the toolbar issue is a CSS problem. I suppose I need
to include the CSS files from xwiki-web-gwt-wysiwyg-client in my host
HTML page.
The problem with Google Chrome persists, though.
11:40 p.m.
New subject: [xwiki-devs] Running wysiwyg GWT editor as standalone
Hi David,
On Mon, May 10, 2010 at 23:30, David Pinn <dpinn(a)byandlarge.net> wrote:
Ahh! of course, the toolbar issue is a CSS problem. I
suppose I need
to include the CSS files from xwiki-web-gwt-wysiwyg-client in my host
HTML page.
The problem with Google Chrome persists, though.
Google Chrome is not "officially" supported by the WYSIWYG editor, that
might be the cause of your issue.
You may want to try and diagnose the Chrome specific CSS issue using
Chrome's developer tools (I think they let you do that). It would be very
nice if you could identify the root cause of the issue, that would make it
much easier to fix!
Guillaume
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
--
Guillaume Lerouge
Product Manager - XWiki SAS
Skype: wikibc
Twitter: glerouge
http://guillaumelerouge.com/
5339
days inactive
5340
days old
5 comments
3 participants
participants (3)
-
David Pinn -
Guillaume Lerouge -
Marius Dumitru Florea