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,'" + + "');
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()) + " });\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.
RE: TinyMCE ajax load
Maybe my response to Martijn Lindhout's question regarding 'TinyMCE in an Ajax loaded panel' can be of any use. Sverre -Oorspronkelijk bericht- Van: Pointbreak [mailto:pointbreak+wicketst...@ml1.net] Verzonden: woensdag 17 december 2008 17:55 Aan: Wicket Users Mailing List Onderwerp: Re: TinyMCE ajax load This will happen if your tabbed panel removes the actual content (dom elements) that contains the editor. I would suggest to let your tabbed panel make its content invisible, not remove dom elements. But if you don't want to change the panel, you can simply add the component that has your tinymcebehavior to the target of the ajax request when switching back to the original panel. This will reinitialize your tinymce editor. On Wed, 17 Dec 2008 19:46 +0330, "Omid Alamdar Milani" wrote: > I'm trying to have an ajax tabbed panel where editor is in one of the > tabs. When page is first showed, the editor tab is active and > everything works fine, but when user changes tab and again returns to > editor tab it doesn't load and plain text area is showed. So it isn't > a problem with loading javascripts, they're already loaded. > > On Wed, Dec 17, 2008 at 6:21 PM, Pointbreak > wrote: > > If by "load with ajax" you mean that the javascript sources are loaded > > on ajax requests, instead of with the initial page, then no, that is not > > supported. The ajax parameter that was available in old 1.3 snapshots > > did not work properly. It has been removed for some time now (also in > > latest 1.3-snapshots). > > There is ajax support (e.g. an InPlaceEditComponent), but all javascript > > will be loaded normally. > > > > On Wed, 17 Dec 2008 17:57 +0330, "Omid Alamdar Milani" > > wrote: > >> Hi, > >> Is there a way to load tiny mce editor with ajax? > >> 1.3 snapshot has an ajax parameter and works correctly on firefox but > >> doesn't work on IE. The latest 1.4 snapshot works fine with IE but the > >> ajax parameter is gone and I couldn't find a way to load it with ajax. > >> > >> - > >> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org > >> For additional commands, e-mail: users-h...@wicket.apache.org > >> > > > > - > > To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org > > For additional commands, e-mail: users-h...@wicket.apache.org > > > > > > - > To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org > For additional commands, e-mail: users-h...@wicket.apache.org > - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org No virus found in this incoming message. Checked by AVG - http://www.avg.com Version: 8.0.176 / Virus Database: 270.9.16/1842 - Release Date: 16-12-2008 18:11 - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
RE: Controlling tinyMCE component
The Wicket TinyMCE API (referring to the latest 1.3 snapshot release) is indeed not as feature rich as one could have wanted. But in the end the Wicket TinyMCE API just generates the javascript code to initialize TinyMCE (see the TinyMCE website). So, for example, to disable the second toolbar row you can overwrite the toJavaScript method of the TinyMCESettings object and do something like this: String buffer = super.toJavaScript(mode, components); buffer += ",\n\ttheme_advanced_buttons2 : \"\""; Sverre -Oorspronkelijk bericht- Van: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Verzonden: maandag 27 oktober 2008 15:49 Aan: users@wicket.apache.org Onderwerp: Controlling tinyMCE component The tinyMCE component has two themes - simple and advanced. When in simple - there is only one toolbar, when in advanced - three. 1. How can I remove toolbars? I could not find such an API. 2. How do I remove separators so that I can rearrange freely the buttons? Kind regards: al_shopov - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] - To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
