I'll show you some parts of my code so you get an idea of how I do things.
First of all, I have used AjaxEditableLabel from wicket-extensions as a
starting point.
TinyMCE's javascripts should always be loaded:
// Preload TinyMCE
add( new AbstractBehavior()
{
@Override
public void renderHead( IHeaderResponse response )
{
if( !tinyMCELoaded )
{
response.renderJavascriptReference(
TinyMCESettings.javaScriptReference() );
settings = buildTinyMCESettings();
tinyMCELoaded = true;
}
}
} );
In my case TinyMCE is loaded through an AJAX call:
@SuppressWarnings("unchecked")
@Override
protected void onEdit( AjaxRequestTarget target )
{
super.onEdit( target );
final String id = editor.getMarkupId( true );
final StringBuilder buf = new StringBuilder();
// Load plugins
buf.append( settings.getLoadPluginJavaScript() ).append( ";\n" );
// Initialize tinyMCE
buf.append( "tinyMCE.init({" ).append( settings.toJavaScript(
Mode.none, Collections.EMPTY_LIST ) ).append( " });\n" );
buf.append( settings.getAdditionalPluginJavaScript() ).append( ";\n"
);
// Setup editor
buf.append( "tinyMCE.execCommand('mceAddControl',true,'" ).append(
id ).append( "');" );
// Request focus on editor
buf.append( "setTimeout( function()
{tinyMCE.execCommand('mceFocus',true,'" ).append( id ).append( "');}, 500
);" );
target.appendJavascript( buf.toString() );
}
As you can see I initialize TinyMCE, and then perform an mceAddControl
command on the textarea I want to convert to a TinyMCE editor.
Finally, I need to switch back to a textarea before unloading, so the
correct contents are POSTed. To do so, I have added an AjaxCallDecorator to
the close request, and allow implementations to override it:
@Override
protected IAjaxCallDecorator getCloseDecorator()
{
return new AjaxCallDecorator()
{
@Override
public CharSequence decorateScript( CharSequence script )
{
return "tinyMCE.execCommand('mceRemoveControl', false, '" +
editor.getMarkupId() + "'); "
+ super.decorateOnSuccessScript( script );
// Call to save contents back to textarea
// return "tinyMCE.get('" + editor.getMarkupId() +
"').save(); " +
// super.decorateScript( script );
}
};
}
The above code removes TinyMCE from the given textarea, and saves the HTML
back into the textarea. I have commented out the call to save(), since it
was not necessary.
Bas
Daniele Dellafiore wrote:
>
> I get what the real problem is: tinyMce saves internally each "editor"
> that
> is added to a page in a list called, well, editors.
> When I remove the behavior from a textField, I should also call
> tinyMce.remove passing the editors as a parameter.
>
> I will try to do this but any help is appreciated :)
>
> This is for the checkbox that enable/disable the tinyMce behavior.
>
>
> I have a more subtle situation: I have a list of textFields and a button
> to
> add more. When I add a new field, I refresh the list via AJAX to show the
> new field. But, refreshing the list also causes the html id of any element
> in the list to change!
>
> So, when in the end I submit the form, tinyMce cannot find its editors
> anymore cause the parent DIV of the INPUT field that has an associated
> tinyMce editor just changed it's html id.
> Given that the id will change and there is no alternatives, I have to find
> a
> way to keep the associations or to clean all editors and recreate them at
> every list refresh.
>
> What is your suggesions?
>
> --
> Daniele Dellafiore
> http://blog.ildella.net
> http://twitter.com/ildella
>
>
--
View this message in context:
http://www.nabble.com/-tinymce--problem-adding-removing-TinyMceBehavior-dinamically-tp25681833p25747314.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
