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()

            public void renderHead( IHeaderResponse response )
                if( !tinyMCELoaded )
TinyMCESettings.javaScriptReference() );
                    settings = buildTinyMCESettings();
                    tinyMCELoaded = true;

        } );

In my case TinyMCE is loaded through an AJAX call:

    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:

    protected IAjaxCallDecorator getCloseDecorator()
        return new AjaxCallDecorator()

            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.


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: 
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

Reply via email to