You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Sverre Boschman <Sv...@topicus.nl> on 2008/12/17 18:14:41 UTC
RE: TinyMCE in an Ajax loaded panel
For wicket 1.3.4/5 in combination with the latest 1.3 wicket-tinymce
snaphot I solved this problem the following way.
Note: Also linked to newer tinymce scripts than those supplied in the
wicket-tinymce jar (building my own javascript reference for that, as
you will notice in the code).
Create a page behaviour, supply your tinymce settings in the contructor
f.e.
This page behaviour will initialize the tinymce editor on the page, but
does not make any textfields tinymce aware. Having the editor
initialized on the page will allow you to add textfields with ajax calls
and make them tinymce aware. See below for some example code.
Next you have to make your own TinyMCEBehavior. The default renderHead
method does not handle ajax reponses very well. So I rewrote the part
where it generates the javascript that has to be attached to the
component (the textfield most likely).
The real voodoo is the getRenderOnDomReadyJavascript() method, which
checks for an AjaxHeaderResponse (private inner class... so an ugly
string comparison on the classname) and makes the javascript call
(tinyMCE.execCommand('mceAddControl'...) to the editor already
initialized on the page to transform a textfield in an tinymce
textfield.
If you want to play around with the focus, you can use this (I have this
in an onAjaxLoad() method on the panel, which get called when the panel
is loaded by an ajax call):
tinyMCE.execCommand('mceFocus',false,'" + <markupId> + "');
But more important is adding an AjaxCallDecorator to the panel that gets
fired when the panel is unloaded. It has to sync to tinymce input with
the original textfield and it has to remove the textarea from the
tinymce editor instance. If you don't, you run into problems with text
not syncing after the second ajax replace.
Good luck with it,
Sverre
---
public class TinyMceAjaxPageBehavior extends AbstractBehavior
{
public TinyMceAjaxPageBehavior()
{
this(new TinyMCESettings());
}
/**
* @param settings
*/
public TinyMceAjaxPageBehavior(TinyMCESettings settings)
{
this.settings = settings;
}
/**
* @see
org.apache.wicket.behavior.AbstractBehavior#bind(org.apache.wicket.Compo
nent)
*/
@Override
public void bind(Component component)
{
super.bind(component);
path =
component.getRequest().getRelativePathPrefixToContextRoot();
}
/**
* @see
wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
up.html.IHeaderResponse)
*/
@Override
public void renderHead(IHeaderResponse response)
{
response.renderJavascriptReference(path +
"tiny_mce/tiny_mce.js", "tiny_mce");
response.renderJavascript(getAddTinyMceSettingsScript(),
null);
}
/**
* @see IridiumTinyMceBehavior.getAddTinyMceSettingsScript
*/
protected String getAddTinyMceSettingsScript()
{
return "" + " tinyMCE.init({"
+ settings.toJavaScript(Mode.none, new
ArrayList<Component>()) + " });\n"
+ settings.getLoadPluginJavaScript() +
settings.getAdditionalPluginJavaScript();
}
}
public class MyTinyMceBehavior extends TinyMceBehavior
{
/**
* @see
wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
up.html.IHeaderResponse)
*/
@Override
public void renderHead(IHeaderResponse response)
{
if (getComponent() == null)
throw new IllegalStateException("TinyMceBehavior
is not bound to a component");
String path =
getComponent().getRequest().getRelativePathPrefixToContextRoot();
response.renderJavascriptReference(path +
"tiny_mce/tiny_mce.js", "tiny_mce");
// Supplied tinyMCE version in the wicket-tinymce jar
//
response.renderJavascriptReference(TinyMCESettings.javaScriptReference()
);
String renderOnDomReady =
getRenderOnDomReadyJavascript(response);
if (renderOnDomReady != null)
{
response.renderOnDomReadyJavascript(renderOnDomReady);
return;
}
String renderJavaScript = getRenderJavascript(response);
if (renderJavaScript != null)
response.renderJavascript(renderJavaScript,
null);
}
/**
* @see
wicket.contrib.tinymce.TinyMceBehavior#getRenderOnDomReadyJavascript(org
.apache.wicket.markup.html.IHeaderResponse)
*/
@Override
protected String getRenderOnDomReadyJavascript(IHeaderResponse
response)
{
if (getComponent() == null)
throw new IllegalStateException("TinyMceBehavior
is not bound to a component");
if
(response.getClass().getName().endsWith("AjaxHeaderResponse"))
return "tinyMCE.execCommand('mceAddControl',
false, '" + getComponent().getMarkupId()
+ "');";
return null;
}
}
return new AjaxCallDecorator()
{
private static final long serialVersionUID = 1L;
/**
* @see
org.apache.wicket.ajax.calldecorator.AjaxCallDecorator#decorateScript(ja
va.lang.CharSequence)
*/
@Override
public CharSequence decorateScript(CharSequence
script)
{
StringBuilder buffer = new
StringBuilder(script.length() + 100);
buffer.append("tinyMCE.triggerSave(true,false);").append(script)
.append(
"tinyMCE.execCommand('mceRemoveControl', false, '" + area.getMarkupId()
+ "');");
return buffer;
}
};
-----Oorspronkelijk bericht-----
Van: martijn.lindhout@gmail.com [mailto:martijn.lindhout@gmail.com]
Namens Martijn Lindhout
Verzonden: donderdag 27 november 2008 16:57
Aan: users@wicket.apache.org
Onderwerp: TinyMCE in an Ajax loaded panel
Hi all,
I searched nabble, but couldn't find any recent posts that brought me a
solution to this problem:
I have a page with two panels, a master/detail setup. The master has a
list
of items, the detail a TinyMCE editor. The details panel is invisible
until
the user clicks an item in the master list. The list disappears and the
detail panel is shown, all using Ajax. The problem is that the TinyMCE
editor doesn't appear, it's just a normal textarea.
Has anyone a solution to this problem?
Thanks
No virus found in this incoming message.
Checked by AVG - http://www.avg.com
Version: 8.0.175 / Virus Database: 270.9.10/1812 - Release Date:
25-11-2008 19:53
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: TinyMCE in an Ajax loaded panel
Posted by jchappelle <jc...@4redi.com>.
I am trying to implement something similar. Would you mind telling me how you
added the AjaxCallDecorator? You said add it to the Panel but I don't see
any methods for that.
Thanks,
Josh
Sverre Boschman wrote:
>
> For wicket 1.3.4/5 in combination with the latest 1.3 wicket-tinymce
> snaphot I solved this problem the following way.
>
> Note: Also linked to newer tinymce scripts than those supplied in the
> wicket-tinymce jar (building my own javascript reference for that, as
> you will notice in the code).
>
> Create a page behaviour, supply your tinymce settings in the contructor
> f.e.
> This page behaviour will initialize the tinymce editor on the page, but
> does not make any textfields tinymce aware. Having the editor
> initialized on the page will allow you to add textfields with ajax calls
> and make them tinymce aware. See below for some example code.
>
> Next you have to make your own TinyMCEBehavior. The default renderHead
> method does not handle ajax reponses very well. So I rewrote the part
> where it generates the javascript that has to be attached to the
> component (the textfield most likely).
> The real voodoo is the getRenderOnDomReadyJavascript() method, which
> checks for an AjaxHeaderResponse (private inner class... so an ugly
> string comparison on the classname) and makes the javascript call
> (tinyMCE.execCommand('mceAddControl'...) to the editor already
> initialized on the page to transform a textfield in an tinymce
> textfield.
>
> If you want to play around with the focus, you can use this (I have this
> in an onAjaxLoad() method on the panel, which get called when the panel
> is loaded by an ajax call):
> tinyMCE.execCommand('mceFocus',false,'" + <markupId> + "');
>
> But more important is adding an AjaxCallDecorator to the panel that gets
> fired when the panel is unloaded. It has to sync to tinymce input with
> the original textfield and it has to remove the textarea from the
> tinymce editor instance. If you don't, you run into problems with text
> not syncing after the second ajax replace.
>
> Good luck with it,
> Sverre
>
>
> ---
>
> public class TinyMceAjaxPageBehavior extends AbstractBehavior
> {
> public TinyMceAjaxPageBehavior()
> {
> this(new TinyMCESettings());
> }
>
> /**
> * @param settings
> */
> public TinyMceAjaxPageBehavior(TinyMCESettings settings)
> {
> this.settings = settings;
> }
>
> /**
> * @see
> org.apache.wicket.behavior.AbstractBehavior#bind(org.apache.wicket.Compo
> nent)
> */
> @Override
> public void bind(Component component)
> {
> super.bind(component);
> path =
> component.getRequest().getRelativePathPrefixToContextRoot();
> }
>
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
> up.html.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
>
> response.renderJavascriptReference(path +
> "tiny_mce/tiny_mce.js", "tiny_mce");
> response.renderJavascript(getAddTinyMceSettingsScript(),
> null);
> }
>
> /**
> * @see IridiumTinyMceBehavior.getAddTinyMceSettingsScript
> */
> protected String getAddTinyMceSettingsScript()
> {
> return "" + " tinyMCE.init({"
> + settings.toJavaScript(Mode.none, new
> ArrayList<Component>()) + " });\n"
> + settings.getLoadPluginJavaScript() +
> settings.getAdditionalPluginJavaScript();
> }
> }
>
>
> public class MyTinyMceBehavior extends TinyMceBehavior
> {
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
> up.html.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
> if (getComponent() == null)
> throw new IllegalStateException("TinyMceBehavior
> is not bound to a component");
>
> String path =
> getComponent().getRequest().getRelativePathPrefixToContextRoot();
> response.renderJavascriptReference(path +
> "tiny_mce/tiny_mce.js", "tiny_mce");
>
> // Supplied tinyMCE version in the wicket-tinymce jar
> //
> response.renderJavascriptReference(TinyMCESettings.javaScriptReference()
> );
>
> String renderOnDomReady =
> getRenderOnDomReadyJavascript(response);
> if (renderOnDomReady != null)
> {
>
> response.renderOnDomReadyJavascript(renderOnDomReady);
>
> return;
> }
>
> String renderJavaScript = getRenderJavascript(response);
> if (renderJavaScript != null)
> response.renderJavascript(renderJavaScript,
> null);
> }
>
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#getRenderOnDomReadyJavascript(org
> .apache.wicket.markup.html.IHeaderResponse)
> */
> @Override
> protected String getRenderOnDomReadyJavascript(IHeaderResponse
> response)
> {
> if (getComponent() == null)
> throw new IllegalStateException("TinyMceBehavior
> is not bound to a component");
> if
> (response.getClass().getName().endsWith("AjaxHeaderResponse"))
> return "tinyMCE.execCommand('mceAddControl',
> false, '" + getComponent().getMarkupId()
> + "');";
>
> return null;
> }
> }
>
>
> return new AjaxCallDecorator()
> {
> private static final long serialVersionUID = 1L;
>
> /**
> * @see
> org.apache.wicket.ajax.calldecorator.AjaxCallDecorator#decorateScript(ja
> va.lang.CharSequence)
> */
> @Override
> public CharSequence decorateScript(CharSequence
> script)
> {
> StringBuilder buffer = new
> StringBuilder(script.length() + 100);
>
> buffer.append("tinyMCE.triggerSave(true,false);").append(script)
> .append(
>
> "tinyMCE.execCommand('mceRemoveControl', false, '" + area.getMarkupId()
> + "');");
> return buffer;
> }
> };
>
>
> -----Oorspronkelijk bericht-----
> Van: martijn.lindhout@gmail.com [mailto:martijn.lindhout@gmail.com]
> Namens Martijn Lindhout
> Verzonden: donderdag 27 november 2008 16:57
> Aan: users@wicket.apache.org
> Onderwerp: TinyMCE in an Ajax loaded panel
>
> Hi all,
>
> I searched nabble, but couldn't find any recent posts that brought me a
> solution to this problem:
>
> I have a page with two panels, a master/detail setup. The master has a
> list
> of items, the detail a TinyMCE editor. The details panel is invisible
> until
> the user clicks an item in the master list. The list disappears and the
> detail panel is shown, all using Ajax. The problem is that the TinyMCE
> editor doesn't appear, it's just a normal textarea.
>
> Has anyone a solution to this problem?
>
> Thanks
>
> No virus found in this incoming message.
> Checked by AVG - http://www.avg.com
> Version: 8.0.175 / Virus Database: 270.9.10/1812 - Release Date:
> 25-11-2008 19:53
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
--
View this message in context: http://www.nabble.com/TinyMCE-in-an-Ajax-loaded-panel-tp20721519p22085676.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
RE: TinyMCE in an Ajax loaded panel
Posted by Martin Heras <mh...@gmail.com>.
Sverre,
Could you paste the code in a formatted way? I tried to use that code, but
its syntax is not right...
I don't understand the fragment where you use AjaxCallDecorator... The
fragment just says "return new AjaxCallDecorator" but that is not inside any
method... Please I need this as soon as possible for my project!
Thank you ver much for your time,
Regards,
Martin
Sverre Boschman wrote:
>
> For wicket 1.3.4/5 in combination with the latest 1.3 wicket-tinymce
> snaphot I solved this problem the following way.
>
> Note: Also linked to newer tinymce scripts than those supplied in the
> wicket-tinymce jar (building my own javascript reference for that, as
> you will notice in the code).
>
> Create a page behaviour, supply your tinymce settings in the contructor
> f.e.
> This page behaviour will initialize the tinymce editor on the page, but
> does not make any textfields tinymce aware. Having the editor
> initialized on the page will allow you to add textfields with ajax calls
> and make them tinymce aware. See below for some example code.
>
> Next you have to make your own TinyMCEBehavior. The default renderHead
> method does not handle ajax reponses very well. So I rewrote the part
> where it generates the javascript that has to be attached to the
> component (the textfield most likely).
> The real voodoo is the getRenderOnDomReadyJavascript() method, which
> checks for an AjaxHeaderResponse (private inner class... so an ugly
> string comparison on the classname) and makes the javascript call
> (tinyMCE.execCommand('mceAddControl'...) to the editor already
> initialized on the page to transform a textfield in an tinymce
> textfield.
>
> If you want to play around with the focus, you can use this (I have this
> in an onAjaxLoad() method on the panel, which get called when the panel
> is loaded by an ajax call):
> tinyMCE.execCommand('mceFocus',false,'" + <markupId> + "');
>
> But more important is adding an AjaxCallDecorator to the panel that gets
> fired when the panel is unloaded. It has to sync to tinymce input with
> the original textfield and it has to remove the textarea from the
> tinymce editor instance. If you don't, you run into problems with text
> not syncing after the second ajax replace.
>
> Good luck with it,
> Sverre
>
>
> ---
>
> public class TinyMceAjaxPageBehavior extends AbstractBehavior
> {
> public TinyMceAjaxPageBehavior()
> {
> this(new TinyMCESettings());
> }
>
> /**
> * @param settings
> */
> public TinyMceAjaxPageBehavior(TinyMCESettings settings)
> {
> this.settings = settings;
> }
>
> /**
> * @see
> org.apache.wicket.behavior.AbstractBehavior#bind(org.apache.wicket.Compo
> nent)
> */
> @Override
> public void bind(Component component)
> {
> super.bind(component);
> path =
> component.getRequest().getRelativePathPrefixToContextRoot();
> }
>
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
> up.html.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
>
> response.renderJavascriptReference(path +
> "tiny_mce/tiny_mce.js", "tiny_mce");
> response.renderJavascript(getAddTinyMceSettingsScript(),
> null);
> }
>
> /**
> * @see IridiumTinyMceBehavior.getAddTinyMceSettingsScript
> */
> protected String getAddTinyMceSettingsScript()
> {
> return "" + " tinyMCE.init({"
> + settings.toJavaScript(Mode.none, new
> ArrayList<Component>()) + " });\n"
> + settings.getLoadPluginJavaScript() +
> settings.getAdditionalPluginJavaScript();
> }
> }
>
>
> public class MyTinyMceBehavior extends TinyMceBehavior
> {
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#renderHead(org.apache.wicket.mark
> up.html.IHeaderResponse)
> */
> @Override
> public void renderHead(IHeaderResponse response)
> {
> if (getComponent() == null)
> throw new IllegalStateException("TinyMceBehavior
> is not bound to a component");
>
> String path =
> getComponent().getRequest().getRelativePathPrefixToContextRoot();
> response.renderJavascriptReference(path +
> "tiny_mce/tiny_mce.js", "tiny_mce");
>
> // Supplied tinyMCE version in the wicket-tinymce jar
> //
> response.renderJavascriptReference(TinyMCESettings.javaScriptReference()
> );
>
> String renderOnDomReady =
> getRenderOnDomReadyJavascript(response);
> if (renderOnDomReady != null)
> {
>
> response.renderOnDomReadyJavascript(renderOnDomReady);
>
> return;
> }
>
> String renderJavaScript = getRenderJavascript(response);
> if (renderJavaScript != null)
> response.renderJavascript(renderJavaScript,
> null);
> }
>
> /**
> * @see
> wicket.contrib.tinymce.TinyMceBehavior#getRenderOnDomReadyJavascript(org
> .apache.wicket.markup.html.IHeaderResponse)
> */
> @Override
> protected String getRenderOnDomReadyJavascript(IHeaderResponse
> response)
> {
> if (getComponent() == null)
> throw new IllegalStateException("TinyMceBehavior
> is not bound to a component");
> if
> (response.getClass().getName().endsWith("AjaxHeaderResponse"))
> return "tinyMCE.execCommand('mceAddControl',
> false, '" + getComponent().getMarkupId()
> + "');";
>
> return null;
> }
> }
>
>
> return new AjaxCallDecorator()
> {
> private static final long serialVersionUID = 1L;
>
> /**
> * @see
> org.apache.wicket.ajax.calldecorator.AjaxCallDecorator#decorateScript(ja
> va.lang.CharSequence)
> */
> @Override
> public CharSequence decorateScript(CharSequence
> script)
> {
> StringBuilder buffer = new
> StringBuilder(script.length() + 100);
>
> buffer.append("tinyMCE.triggerSave(true,false);").append(script)
> .append(
>
> "tinyMCE.execCommand('mceRemoveControl', false, '" + area.getMarkupId()
> + "');");
> return buffer;
> }
> };
>
>
> -----Oorspronkelijk bericht-----
> Van: martijn.lindhout@gmail.com [mailto:martijn.lindhout@gmail.com]
> Namens Martijn Lindhout
> Verzonden: donderdag 27 november 2008 16:57
> Aan: users@wicket.apache.org
> Onderwerp: TinyMCE in an Ajax loaded panel
>
> Hi all,
>
> I searched nabble, but couldn't find any recent posts that brought me a
> solution to this problem:
>
> I have a page with two panels, a master/detail setup. The master has a
> list
> of items, the detail a TinyMCE editor. The details panel is invisible
> until
> the user clicks an item in the master list. The list disappears and the
> detail panel is shown, all using Ajax. The problem is that the TinyMCE
> editor doesn't appear, it's just a normal textarea.
>
> Has anyone a solution to this problem?
>
> Thanks
>
> No virus found in this incoming message.
> Checked by AVG - http://www.avg.com
> Version: 8.0.175 / Virus Database: 270.9.10/1812 - Release Date:
> 25-11-2008 19:53
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
--
View this message in context: http://www.nabble.com/TinyMCE-in-an-Ajax-loaded-panel-tp20721519p25179752.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org