You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Daniele Dellafiore <il...@gmail.com> on 2009/10/03 15:39:36 UTC
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
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?
On Wed, Sep 30, 2009 at 5:20 PM, bgooren <ba...@iswd.nl> wrote:
>
> Well, that's what I meant with "preloading". You cannot use TinyMCE if
> you're
> loading its javascripts from your ajax request. If the TinyMCE scripts are
> loaded from the containing page, then it will work (as you say).
>
>
> nino martinez wael wrote:
> >
> > Actually AFAIK the resources just need to be on path, then you can pretty
> > much do whatever you want. Could be what your definition of preloading
> are
> > :)
> >
> > I have a panel that are added by ajax so I had to make sure the resources
> > used by that panel always where on the containing page.
> >
> > regards
> >
> > 2009/9/30 bgooren <ba...@iswd.nl>
> >
> >>
> >> It's not possible to add TinyMCE dynamically due to the way TinyMCE
> >> works.
> >> What you can do however, is pre-load TinyMCE, and dynamically
> >> enable/disable
> >> it on a component.
> >>
> >> Daniele Dellafiore wrote:
> >> >
> >> > Hi. I have a problem with this example code:
> >> >
> >> > tinyMceBehavior = new TinyMceBehavior();
> >> > PropertyModel<Boolean> richProperty = new PropertyModel(model,
> >> > "rich");
> >> > add(new AjaxCheckBox("switchRte", richProperty) {
> >> >
> >> > @Override
> >> > protected void onUpdate(AjaxRequestTarget target) {
> >> > if (getModelObject()) {
> >> > textArea.add(tinyMceBehavior);
> >> > } else {
> >> > textArea.remove(tinyMceBehavior);
> >> > tinyMceBehavior = new TinyMceBehavior();
> >> > }
> >> > refresh(target);
> >> > }
> >> > });
> >> >
> >> > the purpose is to have a checkbox that add and remove the
> >> > TinyMceBehavior from a text area.
> >> > It works fine but I have this problem: when I Submit the form the
> >> > textArea is in after REMOVING the behavior, I have a javascript error:
> >> >
> >> > t.win.document is null
> >> >
> >> > firebug show the error in tiny_mce_src.js at line 5376
> >> >
> >> > if (!r)
> >> > r = isIE ? t.win.document.body.createTextRange() :
> >> > t.win.document.createRange();
> >> >
> >> > I am using tinymce 3.2.7 but the same problem occurs with tinymce used
> >> > in trunk version of wicket-contrib-tinymce.
> >> >
> >> > the effect is that "submit" does not work.
> >> > if I click on checkbox again, everything continue to work.
> >> > Any idea?
> >> >
> >> > --
> >> > Daniele Dellafiore
> >> > http://blog.ildella.net
> >> > http://twitter.com/ildella
> >> >
> >> > ---------------------------------------------------------------------
> >> > 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--problem-adding-removing-TinyMceBehavior-dinamically-tp25681833p25682644.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
> >>
> >>
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/-tinymce--problem-adding-removing-TinyMceBehavior-dinamically-tp25681833p25683255.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
>
>
--
Daniele Dellafiore
http://blog.ildella.net
http://twitter.com/ildella
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
Posted by bgooren <ba...@iswd.nl>.
Daniele,
So why don't you collect a list of markup-ids serverside, perform a TinyMCE
unload through AjaxRequestTarget.prepentJavascript(), and then have it
redraw the list and load TinyMCE in appendJavascript()?
Another alternative would be to manually add the component trough
javascript, see:
http://wicketinaction.com/2008/10/repainting-only-newly-created-repeater-items-via-ajax/;
This way you do not need to refresh all items in the listview
Hope this helps, TinyMCE + AJAX is interesting to say the least.
Daniele Dellafiore wrote:
>
> yep I do that. Actually, I wrote that article :)
>
> My problem is more subtle here and I have discovered now that is
> related to javascript execution order. In fact I open a new thread to
> investigate that specific issue. I also try to produce a ExamplePage
> to commit on tinymce example project.
>
> On Fri, Oct 9, 2009 at 7:47 PM, Dane Laverty <da...@gmail.com>
> wrote:
>> Did you get the
>> response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
>> ?
>>
>> In my code it goes like this (as per
>> http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/):
>>
>> add(new HeaderContributor(new IHeaderContributor() {
>> public void renderHead(IHeaderResponse response) {
>>
>> response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
>> }
>> }));
>>
>> Dane
>>
>> On Fri, Oct 9, 2009 at 10:17 AM, Daniele Dellafiore
>> <il...@gmail.com>wrote:
>>
>>> I start from the end: I need fine control over the order javascript is
>>> executed. What is the javascript to call a refresh on a component like
>>> is done when I use target.addComponent()?
>>>
>>>
>>> From the start.
>>> I make that work with bgooren suggestion, using the javascript to
>>> remove the editor. No need to remove the behavior on java side. That
>>> works for the checkbox that dynamically adds and removes the Rich
>>> Editor.
>>>
>>> Now, the problem on refreshing a list of fields.
>>> What happens: to add a new field, click on ADD and I add my ListView
>>> is added to be refreshed via a target.addComponent(). In doing this,
>>> the markupId of the component changes, so tinyMce lose reference to
>>> it's existing editors.
>>>
>>> My solution: on the ADD callback, I remove the editors and let them be
>>> re-added during repainting. Works? NO!
>>> Why? because the listView is repainted before the mceControlRemove is
>>> executed, even if they are added to the same AjaxRequestTarget in the
>>> ADD callback. So happens that:
>>> 1. the remove fails because the old component is found no more
>>> 2. after, the submit fails because tinyMCE still have the old editor
>>> reference.
>>>
>>> --> ;(
>>>
>>> On Mon, Oct 5, 2009 at 11:44 AM, Daniele Dellafiore <il...@gmail.com>
>>> wrote:
>>> > Hey Bas, thanks for answering.
>>> >
>>> > Unfortunately it does not work.
>>> > Even if I run:
>>> >
>>> > String removeEditor =
>>> "tinyMCE.execCommand('mceRemoveControl',
>>> > false, '"
>>> > + propertyPanel.getValueMarkupId() + "');";
>>> > target.appendJavascript(removeEditor);
>>> >
>>> > or simply remove the TinyMceBehavior from my TextField, the result is
>>> the
>>> > same: mce editor disappear correclty, but remains in tinyMCE.editors
>>> list
>>> so
>>> > Tiny tries to process it in a successive iteration.
>>> >
>>> > I try to find help on tinyMCE forum
>>> >
>>> >
>>> > On Mon, Oct 5, 2009 at 10:59 AM, bgooren <ba...@iswd.nl> wrote:
>>> >>
>>> >> 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-unsubscribe@wicket.apache.org
>>> >> For additional commands, e-mail: users-help@wicket.apache.org
>>> >>
>>> >
>>> >
>>> >
>>> > --
>>> > Daniele Dellafiore
>>> > http://blog.ildella.net
>>> > http://twitter.com/ildella
>>> >
>>>
>>>
>>>
>>> --
>>> Daniele Dellafiore
>>> http://blog.ildella.net
>>> http://twitter.com/ildella
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>
>
>
>
> --
> Daniele Dellafiore
> http://blog.ildella.net
> http://twitter.com/ildella
>
> ---------------------------------------------------------------------
> 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--problem-adding-removing-TinyMceBehavior-dinamically-tp25681833p25857140.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] problem adding/removing TinyMceBehavior dinamically
Posted by Daniele Dellafiore <il...@gmail.com>.
yep I do that. Actually, I wrote that article :)
My problem is more subtle here and I have discovered now that is
related to javascript execution order. In fact I open a new thread to
investigate that specific issue. I also try to produce a ExamplePage
to commit on tinymce example project.
On Fri, Oct 9, 2009 at 7:47 PM, Dane Laverty <da...@gmail.com> wrote:
> Did you get the
> response.renderJavascriptReference(TinyMCESettings.javaScriptReference()); ?
>
> In my code it goes like this (as per
> http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/):
>
> add(new HeaderContributor(new IHeaderContributor() {
> public void renderHead(IHeaderResponse response) {
>
> response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
> }
> }));
>
> Dane
>
> On Fri, Oct 9, 2009 at 10:17 AM, Daniele Dellafiore <il...@gmail.com>wrote:
>
>> I start from the end: I need fine control over the order javascript is
>> executed. What is the javascript to call a refresh on a component like
>> is done when I use target.addComponent()?
>>
>>
>> From the start.
>> I make that work with bgooren suggestion, using the javascript to
>> remove the editor. No need to remove the behavior on java side. That
>> works for the checkbox that dynamically adds and removes the Rich
>> Editor.
>>
>> Now, the problem on refreshing a list of fields.
>> What happens: to add a new field, click on ADD and I add my ListView
>> is added to be refreshed via a target.addComponent(). In doing this,
>> the markupId of the component changes, so tinyMce lose reference to
>> it's existing editors.
>>
>> My solution: on the ADD callback, I remove the editors and let them be
>> re-added during repainting. Works? NO!
>> Why? because the listView is repainted before the mceControlRemove is
>> executed, even if they are added to the same AjaxRequestTarget in the
>> ADD callback. So happens that:
>> 1. the remove fails because the old component is found no more
>> 2. after, the submit fails because tinyMCE still have the old editor
>> reference.
>>
>> --> ;(
>>
>> On Mon, Oct 5, 2009 at 11:44 AM, Daniele Dellafiore <il...@gmail.com>
>> wrote:
>> > Hey Bas, thanks for answering.
>> >
>> > Unfortunately it does not work.
>> > Even if I run:
>> >
>> > String removeEditor =
>> "tinyMCE.execCommand('mceRemoveControl',
>> > false, '"
>> > + propertyPanel.getValueMarkupId() + "');";
>> > target.appendJavascript(removeEditor);
>> >
>> > or simply remove the TinyMceBehavior from my TextField, the result is the
>> > same: mce editor disappear correclty, but remains in tinyMCE.editors list
>> so
>> > Tiny tries to process it in a successive iteration.
>> >
>> > I try to find help on tinyMCE forum
>> >
>> >
>> > On Mon, Oct 5, 2009 at 10:59 AM, bgooren <ba...@iswd.nl> wrote:
>> >>
>> >> 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-unsubscribe@wicket.apache.org
>> >> For additional commands, e-mail: users-help@wicket.apache.org
>> >>
>> >
>> >
>> >
>> > --
>> > Daniele Dellafiore
>> > http://blog.ildella.net
>> > http://twitter.com/ildella
>> >
>>
>>
>>
>> --
>> Daniele Dellafiore
>> http://blog.ildella.net
>> http://twitter.com/ildella
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
--
Daniele Dellafiore
http://blog.ildella.net
http://twitter.com/ildella
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
Posted by Dane Laverty <da...@gmail.com>.
Did you get the
response.renderJavascriptReference(TinyMCESettings.javaScriptReference()); ?
In my code it goes like this (as per
http://wicketbyexample.com/wicket-tinymce-some-advanced-tips/):
add(new HeaderContributor(new IHeaderContributor() {
public void renderHead(IHeaderResponse response) {
response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
}
}));
Dane
On Fri, Oct 9, 2009 at 10:17 AM, Daniele Dellafiore <il...@gmail.com>wrote:
> I start from the end: I need fine control over the order javascript is
> executed. What is the javascript to call a refresh on a component like
> is done when I use target.addComponent()?
>
>
> From the start.
> I make that work with bgooren suggestion, using the javascript to
> remove the editor. No need to remove the behavior on java side. That
> works for the checkbox that dynamically adds and removes the Rich
> Editor.
>
> Now, the problem on refreshing a list of fields.
> What happens: to add a new field, click on ADD and I add my ListView
> is added to be refreshed via a target.addComponent(). In doing this,
> the markupId of the component changes, so tinyMce lose reference to
> it's existing editors.
>
> My solution: on the ADD callback, I remove the editors and let them be
> re-added during repainting. Works? NO!
> Why? because the listView is repainted before the mceControlRemove is
> executed, even if they are added to the same AjaxRequestTarget in the
> ADD callback. So happens that:
> 1. the remove fails because the old component is found no more
> 2. after, the submit fails because tinyMCE still have the old editor
> reference.
>
> --> ;(
>
> On Mon, Oct 5, 2009 at 11:44 AM, Daniele Dellafiore <il...@gmail.com>
> wrote:
> > Hey Bas, thanks for answering.
> >
> > Unfortunately it does not work.
> > Even if I run:
> >
> > String removeEditor =
> "tinyMCE.execCommand('mceRemoveControl',
> > false, '"
> > + propertyPanel.getValueMarkupId() + "');";
> > target.appendJavascript(removeEditor);
> >
> > or simply remove the TinyMceBehavior from my TextField, the result is the
> > same: mce editor disappear correclty, but remains in tinyMCE.editors list
> so
> > Tiny tries to process it in a successive iteration.
> >
> > I try to find help on tinyMCE forum
> >
> >
> > On Mon, Oct 5, 2009 at 10:59 AM, bgooren <ba...@iswd.nl> wrote:
> >>
> >> 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-unsubscribe@wicket.apache.org
> >> For additional commands, e-mail: users-help@wicket.apache.org
> >>
> >
> >
> >
> > --
> > Daniele Dellafiore
> > http://blog.ildella.net
> > http://twitter.com/ildella
> >
>
>
>
> --
> Daniele Dellafiore
> http://blog.ildella.net
> http://twitter.com/ildella
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
Posted by Daniele Dellafiore <il...@gmail.com>.
I start from the end: I need fine control over the order javascript is
executed. What is the javascript to call a refresh on a component like
is done when I use target.addComponent()?
>From the start.
I make that work with bgooren suggestion, using the javascript to
remove the editor. No need to remove the behavior on java side. That
works for the checkbox that dynamically adds and removes the Rich
Editor.
Now, the problem on refreshing a list of fields.
What happens: to add a new field, click on ADD and I add my ListView
is added to be refreshed via a target.addComponent(). In doing this,
the markupId of the component changes, so tinyMce lose reference to
it's existing editors.
My solution: on the ADD callback, I remove the editors and let them be
re-added during repainting. Works? NO!
Why? because the listView is repainted before the mceControlRemove is
executed, even if they are added to the same AjaxRequestTarget in the
ADD callback. So happens that:
1. the remove fails because the old component is found no more
2. after, the submit fails because tinyMCE still have the old editor reference.
--> ;(
On Mon, Oct 5, 2009 at 11:44 AM, Daniele Dellafiore <il...@gmail.com> wrote:
> Hey Bas, thanks for answering.
>
> Unfortunately it does not work.
> Even if I run:
>
> String removeEditor = "tinyMCE.execCommand('mceRemoveControl',
> false, '"
> + propertyPanel.getValueMarkupId() + "');";
> target.appendJavascript(removeEditor);
>
> or simply remove the TinyMceBehavior from my TextField, the result is the
> same: mce editor disappear correclty, but remains in tinyMCE.editors list so
> Tiny tries to process it in a successive iteration.
>
> I try to find help on tinyMCE forum
>
>
> On Mon, Oct 5, 2009 at 10:59 AM, bgooren <ba...@iswd.nl> wrote:
>>
>> 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-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
>
> --
> Daniele Dellafiore
> http://blog.ildella.net
> http://twitter.com/ildella
>
--
Daniele Dellafiore
http://blog.ildella.net
http://twitter.com/ildella
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
Posted by Daniele Dellafiore <il...@gmail.com>.
Hey Bas, thanks for answering.
Unfortunately it does not work.
Even if I run:
String removeEditor = "tinyMCE.execCommand('mceRemoveControl',
false, '"
+ propertyPanel.getValueMarkupId() + "');";
target.appendJavascript(removeEditor);
or simply remove the TinyMceBehavior from my TextField, the result is the
same: mce editor disappear correclty, but remains in tinyMCE.editors list so
Tiny tries to process it in a successive iteration.
I try to find help on tinyMCE forum
On Mon, Oct 5, 2009 at 10:59 AM, bgooren <ba...@iswd.nl> wrote:
>
> 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-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Daniele Dellafiore
http://blog.ildella.net
http://twitter.com/ildella
Re: [tinymce] problem adding/removing TinyMceBehavior dinamically
Posted by bgooren <ba...@iswd.nl>.
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-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org