Re: Any Example or doucument of Rich Edit, such as YUI,FCK

[Edvin Syse]

Hi!

I once created a simple behaviour for WYMEditor like this:

public class WymEditorBehaviour extends AbstractAjaxBehavior {
        private static final String EDITOR_CLASS = "wymeditor";
        public static final String SUBMIT_CLASS = "wymupdate";

        public WymEditorBehaviour() {
        }
        
        @Override
        protected void onBind() {
                super.onBind();
                
                getComponent().add(new SimpleAttributeAppender("class", 
EDITOR_CLASS,
" "));
                
                /* Add the onload javascript */
                MicroMap vars = new MicroMap("EDITOR_CLASS", EDITOR_CLASS);
        
getComponent().add(TextTemplateHeaderContributor.forJavaScript(getClass(),
"wyminit.js", new Model(vars)));
                
        };
        
                
        @Override
        public void renderHead(IHeaderResponse response) {
                super.renderHead(response);
                
                response.renderJavascriptReference(JQueryBehavior.JQUERY_JS);
                
response.renderCSSReference("/js/wymeditor/skins/default/screen.css");
        
response.renderJavascriptReference("/js/wymeditor/jquery.wymeditor.pack.js");
        }


}

Then you add it to your textarea:

TextArea ta = new TextArea("id");
ta.add(new WymEditorBehaviour());

Then the save-button of your form needs a special class for WYMEditor to
do it's think before submit:

Button saveButton = new Button("saveArticle") {
        @Override
        public void onSubmit() {
                // Save here
        }
        
        @Override
        protected void onComponentTag(ComponentTag tag) {
                super.onComponentTag(tag);
                tag.put("class", WymEditorBehaviour.SUBMIT_CLASS);
        }
};
add(saveButton);

You can either include wicketstuff-jquery to use this, or change:

response.renderJavascriptReference(JQueryBehavior.JQUERY_JS);

.. to irefer to your local copy of jquery.js.

The wyminit.js file  looks like:

$(document).ready(function() {
        $(".${EDITOR_CLASS}").wymeditor({
                
                postInit: function(wym) {
             //construct the button's html
              var html = "<li class='wym_tools_newbutton'>"
              + "<a name='NewButton' href='#'"
              + " style='background-image:"
              + " url(/js/wymeditor/skins/default/folder_image.png)'>"
              + "Add image"
              + "</a></li>";

              //add the button to the tools box
              jQuery(wym._box)
                      .find(wym._options.toolsSelector +
wym._options.toolsListSelector)
                      .append(html);

              //handle click event
              jQuery(wym._box)
                      .find('li.wym_tools_newbutton a').click(function() {

                      window.open('/admin/files/wym/filechooser',
'PopUpWindow', 'width=800,height=600');
                      //console.log("external"); //debug-logging

                      return(false); //supress forwarding
              });
                }
        });
});

Hope this helps :)

-- Edvin


Mead skrev:
> Hello All,
>   Any Example or doucument of Rich Edit, such as YUI,FCK
> How to integration with wicket? 
> There is so little doc about that's
> thanks to provide help
> 
> Best regards,                     
> Mead
> [EMAIL PROTECTED]
> 2008-01-25
> 
> 
> 
> ---------------------------------------------------------------------
> 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]