You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Erik Dreyer <er...@gmail.com> on 2007/08/01 04:00:11 UTC
TinyMCE and Panel loaded via ajax
Hi,
I'm experiencing issues trying to get the TinyMCEBehavior (from:
wicket-contrib-tinymce) it works just fine when loaded via a normal HTTP
request, but not when it exists on a panel that is loaded asynchronously via
ajax. Has anyone else experienced this? I'm simply trying to follow the
simple examples (wicket-contrib-tinymce-examples).
I get JS errors in both IE and Firefox. In Firefox it attempts to work and
renders strangely before abending. In IE, it simply fails.
I've been trying to debug this and will submit a patch if I get it working,
but if someone else out there has done that and can save some time, it sure
would be appreciated.
I'm not doing anything out of the ordinary:
public class RichTextEditor extends Panel {
public RichTextEditor(String id, boolean ajax) {
add(new TextArea("rte"));
add(new TinyMceBehavior(ajax));
}
}
Thanks,
Erik
Re: TinyMCE and Panel loaded via ajax
Posted by Erik Dreyer <er...@gmail.com>.
Well, I found a solution that works. It's not the prettiest, but just might
be the only way to get tinyMCE to work when it's contained in a Panel loaded
asynchronously. It's a two behavior solution. One initializing behavior
should be added to the Page class itself. This contains the tinyMCE
initialization code. The 2nd behavior should be added to a TextArea
instance that you want to convert to a tinyMCE editor.
I'm pretty new to Wicket, so any suggestions for improvement or alternate
solutions are quite welcome.
Like so:
add(new TextArea("editor", getModel()).add(new TinyMceBehavior(isAjax)));
Here are the two classes I wrote. These are customized to my own use, but
can easily be adapted.
public class TinyMceInitBehavior extends AbstractBehavior {
private static final long serialVersionUID = 1L;
/* (non-Javadoc)
* @see org.apache.wicket.behavior.AbstractBehavior#renderHead(
org.apache.wicket.markup.html.IHeaderResponse)
*/
@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
// you'll need to change this
response.renderJavascriptReference("/js/tiny_mce/tiny_mce.js");
// initialize tinyMCE
StringBuilder initBuilder = new StringBuilder();
initBuilder.append("tinyMCE.init({\n")
.append("theme: \"advanced\",\n")
.append("theme_advanced_toolbar_location : \"top\",\n")
.append("theme_advanced_toolbar_align : \"left\",\n")
.append("theme_advanced_buttons1 :
\"fontselect,fontsizeselect,undo,redo,separator,forecolor,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,separator,bullist,numlist,separator,outdent,indent\",\n")
.append("theme_advanced_buttons2 : \"\",\n")
.append("theme_advanced_buttons3 : \"\",\n")
.append("mode : \"exact\"\n")
.append("});");
response.renderJavascript(initBuilder.toString(), "init");
}
}
And the behavior intended for TextFields:
public class TinyMceBehavior extends AbstractDefaultAjaxBehavior {
private static final long serialVersionUID = 1L;
boolean ajax;
/**
*
*/
public TinyMceBehavior(boolean ajax) {
this.ajax = ajax;
}
/* (non-Javadoc)
* @see
org.apache.wicket.behavior.AbstractAjaxBehavior#onComponentRendered()
*/
@Override
protected void onComponentRendered() {
super.onComponentRendered();
if (ajax) {
// load editor script
Response response = getComponent().getResponse();
JavascriptUtils.writeJavascript(response, getCallbackScript(),
"load");
} else {
Response response = getComponent().getResponse();
JavascriptUtils.writeJavascript(response,
"tinyMCE.execCommand('mceAddControl', true, '" +
getComponent().getMarkupId() + "');");
}
}
/* (non-Javadoc)
* @see org.apache.wicket.ajax.AbstractDefaultAjaxBehavior#respond(
org.apache.wicket.ajax.AjaxRequestTarget)
*/
@Override
protected void respond(AjaxRequestTarget target) {
StringBuilder builder = new StringBuilder();
builder.append("\ntinyMCE.execCommand('mceAddControl', true, '"
+ getComponent().getMarkupId() + "');");
//target.appendJavascript(JavascriptUtils.SCRIPT_OPEN_TAG);
target.appendJavascript(builder.toString());
//target.appendJavascript(JavascriptUtils.SCRIPT_CLOSE_TAG);
}
}
On 7/31/07, Erik Dreyer <er...@gmail.com> wrote:
>
> I've made a bit of progress on this. I actually created a new
> TinyMCEBehavior that does away with the TinyMCESettings because that didn't
> give me the control I needed in setting up the editor. It's not working
> 100% yet, but if I can get it working in both browsers reliably, I'll post
> what I've done here.
>
> On 7/31/07, Igor Vaynberg <ig...@gmail.com> wrote:
> >
> > i believe this is a known issue and the author of contrib project was
> > working on it. but that was a long time ago.
> > -igor
> >
> >
> > On 7/31/07, Erik Dreyer <erik.dreyer@gmail.com > wrote:
> > >
> > > Hi,
> > >
> > > I'm experiencing issues trying to get the TinyMCEBehavior (from:
> > > wicket-contrib-tinymce) it works just fine when loaded via a normal
> > HTTP
> > > request, but not when it exists on a panel that is loaded
> > asynchronously
> > > via
> > > ajax. Has anyone else experienced this? I'm simply trying to follow
> > the
> > > simple examples (wicket-contrib-tinymce-examples).
> > >
> > > I get JS errors in both IE and Firefox. In Firefox it attempts to
> > work
> > > and
> > > renders strangely before abending. In IE, it simply fails.
> > >
> > > I've been trying to debug this and will submit a patch if I get it
> > > working,
> > > but if someone else out there has done that and can save some time, it
> >
> > > sure
> > > would be appreciated.
> > >
> > > I'm not doing anything out of the ordinary:
> > >
> > > public class RichTextEditor extends Panel {
> > > public RichTextEditor(String id, boolean ajax) {
> > > add(new TextArea("rte"));
> > > add(new TinyMceBehavior(ajax));
> > > }
> > > }
> > >
> > > Thanks,
> > > Erik
> > >
> >
>
>
Re: TinyMCE and Panel loaded via ajax
Posted by Erik Dreyer <er...@gmail.com>.
I've made a bit of progress on this. I actually created a new
TinyMCEBehavior that does away with the TinyMCESettings because that didn't
give me the control I needed in setting up the editor. It's not working
100% yet, but if I can get it working in both browsers reliably, I'll post
what I've done here.
On 7/31/07, Igor Vaynberg <ig...@gmail.com> wrote:
>
> i believe this is a known issue and the author of contrib project was
> working on it. but that was a long time ago.
> -igor
>
>
> On 7/31/07, Erik Dreyer <er...@gmail.com> wrote:
> >
> > Hi,
> >
> > I'm experiencing issues trying to get the TinyMCEBehavior (from:
> > wicket-contrib-tinymce) it works just fine when loaded via a normal HTTP
> > request, but not when it exists on a panel that is loaded asynchronously
> > via
> > ajax. Has anyone else experienced this? I'm simply trying to follow
> the
> > simple examples (wicket-contrib-tinymce-examples).
> >
> > I get JS errors in both IE and Firefox. In Firefox it attempts to work
> > and
> > renders strangely before abending. In IE, it simply fails.
> >
> > I've been trying to debug this and will submit a patch if I get it
> > working,
> > but if someone else out there has done that and can save some time, it
> > sure
> > would be appreciated.
> >
> > I'm not doing anything out of the ordinary:
> >
> > public class RichTextEditor extends Panel {
> > public RichTextEditor(String id, boolean ajax) {
> > add(new TextArea("rte"));
> > add(new TinyMceBehavior(ajax));
> > }
> > }
> >
> > Thanks,
> > Erik
> >
>
Re: TinyMCE and Panel loaded via ajax
Posted by Igor Vaynberg <ig...@gmail.com>.
i believe this is a known issue and the author of contrib project was
working on it. but that was a long time ago.
-igor
On 7/31/07, Erik Dreyer <er...@gmail.com> wrote:
>
> Hi,
>
> I'm experiencing issues trying to get the TinyMCEBehavior (from:
> wicket-contrib-tinymce) it works just fine when loaded via a normal HTTP
> request, but not when it exists on a panel that is loaded asynchronously
> via
> ajax. Has anyone else experienced this? I'm simply trying to follow the
> simple examples (wicket-contrib-tinymce-examples).
>
> I get JS errors in both IE and Firefox. In Firefox it attempts to work
> and
> renders strangely before abending. In IE, it simply fails.
>
> I've been trying to debug this and will submit a patch if I get it
> working,
> but if someone else out there has done that and can save some time, it
> sure
> would be appreciated.
>
> I'm not doing anything out of the ordinary:
>
> public class RichTextEditor extends Panel {
> public RichTextEditor(String id, boolean ajax) {
> add(new TextArea("rte"));
> add(new TinyMceBehavior(ajax));
> }
> }
>
> Thanks,
> Erik
>