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: [email protected] [mailto:[email protected]]
Namens Martijn Lindhout
Verzonden: donderdag 27 november 2008 16:57
Aan: [email protected]
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: [email protected]
For additional commands, e-mail: [email protected]
