[xwiki-devs] Running wysiwyg GWT editor as standalone
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.
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
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@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@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
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-clie... ). 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-serv... (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-clie... (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@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@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
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.
Hi David, On Mon, May 10, 2010 at 23:30, David Pinn <dpinn@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@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
-- Guillaume Lerouge Product Manager - XWiki SAS Skype: wikibc Twitter: glerouge http://guillaumelerouge.com/
participants (3)
-
David Pinn -
Guillaume Lerouge -
Marius Dumitru Florea