You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by sshark <ss...@gmail.com> on 2009/04/24 10:45:35 UTC

Popup Editor using TinyMCE and ModalWindow

Hi,

I want to construct popup WYSIWYG editor using TinyMCE and ModalWindow. What
I got was an ordinary un-mocked up plain textarea in the pop up dialog box.
I have included my codes, the page and panel here. TinyMCE works well in the
page. Did I miss any "settings"? Any suggestion? Thank you.

public class TinyMCEPage extends WebPage
{
    private static final long serialVersionUID = 1L;

    public TinyMCEPage()
    {
        final ModalWindow editorDialog = new ModalWindow("editorDialog");
        editorDialog.setTitle("Edit Text");
        editorDialog.setContent(new
TinyEditor(editorDialog.getContentId()));

        add(editorDialog);
        add(new AjaxLink("edit")
        {
            public void onClick(AjaxRequestTarget target)
            {
                editorDialog.show(target);
            }
        });
    }
}

TinyMCEPage.html
<html>
<body>
<div wicket:id="editorDialog"></div>
<a wicket:id="edit">Edit</a>
</body>
</html>


public class TinyEditor extends Panel
{
    private static final long serialVersionUID = 1L;

    public TinyEditor(String id)
    {
        super(id);

        add(new TextArea("editor", new Model("Write here"))
            .add(new TinyMceBehavior(new
TinyMCESettings(TinyMCESettings.Theme.advanced))));
    }
}

TinyEditor.html
<wicket:panel>
    <textarea wicket:id="editor"></textarea>
</wicket:panel>

/lim/

Re: Popup Editor using TinyMCE and ModalWindow

Posted by Fernando Wermus <fe...@gmail.com>.
This is the answer,

    /**
     * This is needed because even though {@link TinyMceBehavior} implements
IHeaderContributor,
     * the header doesn't get contributed when the component is first
rendered though an AJAX call.
     * @see https://issues.apache.org/jira/browse/WICKET-618 (which was
closed WontFix)
     */
    public void renderHead(IHeaderResponse response) {

response.renderJavascriptReference(TinyMCESettings.javaScriptReference());
    }

On Thu, Jun 18, 2009 at 12:08 PM, Fernando Wermus <fernando.wermus@gmail.com
> wrote:

> I am having the same problem than you. How do you solve it?
>
>
> On Fri, Apr 24, 2009 at 1:45 AM, sshark <ss...@gmail.com> wrote:
>
>> Hi,
>>
>> I want to construct popup WYSIWYG editor using TinyMCE and ModalWindow.
>> What
>> I got was an ordinary un-mocked up plain textarea in the pop up dialog
>> box.
>> I have included my codes, the page and panel here. TinyMCE works well in
>> the
>> page. Did I miss any "settings"? Any suggestion? Thank you.
>>
>> public class TinyMCEPage extends WebPage
>> {
>>    private static final long serialVersionUID = 1L;
>>
>>    public TinyMCEPage()
>>    {
>>        final ModalWindow editorDialog = new ModalWindow("editorDialog");
>>        editorDialog.setTitle("Edit Text");
>>        editorDialog.setContent(new
>> TinyEditor(editorDialog.getContentId()));
>>
>>        add(editorDialog);
>>        add(new AjaxLink("edit")
>>        {
>>            public void onClick(AjaxRequestTarget target)
>>            {
>>                editorDialog.show(target);
>>            }
>>        });
>>    }
>> }
>>
>> TinyMCEPage.html
>> <html>
>> <body>
>> <div wicket:id="editorDialog"></div>
>> <a wicket:id="edit">Edit</a>
>> </body>
>> </html>
>>
>>
>> public class TinyEditor extends Panel
>> {
>>    private static final long serialVersionUID = 1L;
>>
>>    public TinyEditor(String id)
>>    {
>>        super(id);
>>
>>        add(new TextArea("editor", new Model("Write here"))
>>            .add(new TinyMceBehavior(new
>> TinyMCESettings(TinyMCESettings.Theme.advanced))));
>>    }
>> }
>>
>> TinyEditor.html
>> <wicket:panel>
>>    <textarea wicket:id="editor"></textarea>
>> </wicket:panel>
>>
>> /lim/
>>
>
>
>
> --
> Fernando Wermus.
>
> www.linkedin.com/in/fernandowermus
>



-- 
Fernando Wermus.

www.linkedin.com/in/fernandowermus

Re: Popup Editor using TinyMCE and ModalWindow

Posted by Fernando Wermus <fe...@gmail.com>.
I am having the same problem than you. How do you solve it?

On Fri, Apr 24, 2009 at 1:45 AM, sshark <ss...@gmail.com> wrote:

> Hi,
>
> I want to construct popup WYSIWYG editor using TinyMCE and ModalWindow.
> What
> I got was an ordinary un-mocked up plain textarea in the pop up dialog box.
> I have included my codes, the page and panel here. TinyMCE works well in
> the
> page. Did I miss any "settings"? Any suggestion? Thank you.
>
> public class TinyMCEPage extends WebPage
> {
>    private static final long serialVersionUID = 1L;
>
>    public TinyMCEPage()
>    {
>        final ModalWindow editorDialog = new ModalWindow("editorDialog");
>        editorDialog.setTitle("Edit Text");
>        editorDialog.setContent(new
> TinyEditor(editorDialog.getContentId()));
>
>        add(editorDialog);
>        add(new AjaxLink("edit")
>        {
>            public void onClick(AjaxRequestTarget target)
>            {
>                editorDialog.show(target);
>            }
>        });
>    }
> }
>
> TinyMCEPage.html
> <html>
> <body>
> <div wicket:id="editorDialog"></div>
> <a wicket:id="edit">Edit</a>
> </body>
> </html>
>
>
> public class TinyEditor extends Panel
> {
>    private static final long serialVersionUID = 1L;
>
>    public TinyEditor(String id)
>    {
>        super(id);
>
>        add(new TextArea("editor", new Model("Write here"))
>            .add(new TinyMceBehavior(new
> TinyMCESettings(TinyMCESettings.Theme.advanced))));
>    }
> }
>
> TinyEditor.html
> <wicket:panel>
>    <textarea wicket:id="editor"></textarea>
> </wicket:panel>
>
> /lim/
>



-- 
Fernando Wermus.

www.linkedin.com/in/fernandowermus