Wmd Editor in Wicket
05 Feb 2010i guess this post needs no explanation
RichEditor.java
import org.apache.wicket.ResourceReference;
import org.apache.wicket.markup.html.IHeaderContributor;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.form.FormComponentPanel;
import org.apache.wicket.markup.html.form.TextArea;
import org.apache.wicket.model.IModel;
/***
* WMD rich Editor
* @author Ananth
*/
public class RichEditor extends FormComponentPanel implements
IHeaderContributor
{
private static final long serialVersionUID = 1L;
/*** text area */
private TextArea textArea;
/***
* constructor
*
* @param id
* id
* @param model
* model for the textarea
*/
public RichEditor(String id, IModel model)
{
super(id, model);
add(textArea = new TextArea("textarea", model));
}
protected void convertInput()
{
// TODO filter any javascript in the markup
setConvertedInput(textArea.getConvertedInput());
}
public void renderHead(IHeaderResponse response)
{
// jquery
response.renderJavascriptReference("js/jquery/jquery.min.js");
// TextArea Resizer
ResourceReference resizeRef = new ResourceReference(getClass(),"jquery.textarearesizer.js");
response.renderJavascriptReference(resizeRef);
response.renderOnDomReadyJavascript("$('textarea').TextAreaResizer();");
}
}
RichEditor.html
<html xmlns:wicket>
<wicket:head>
<style type="text/css">
div.grippie {
background: #EEEEEE url(img/grippie.png) no-repeat scroll center 2px;
border-color: #DDDDDD;
border-style: solid;
border-width: 0pt 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden;
}
.resizable-textarea textarea {
display: block;
margin-bottom: 0pt;
width: 95%;
height: 20%;
}
</style>
</wicket:head>
<wicket:panel>
<textarea id="myTextarea" wicket:id="textarea">
</textarea>
<script type="text/javascript">
// to set WMD's options programatically, define a "wmd_options" object with whatever settings
// you want to override. Here are the defaults:
wmd_options = {
// format sent to the server. Use "Markdown" to return the markdown source.
output : "HTML",
// line wrapping length for lists, blockquotes, etc.
lineLength : 40,
// toolbar buttons. Undo and redo get appended automatically.
buttons : "bold italic | link blockquote code image | ol ul heading hr",
// option to automatically add WMD to the first textarea found. See apiExample.html for usage.
autostart : true
};
</script>
<wicket:link>
<script type="text/javascript" src="wmd.js"></script>
</wicket:link>
<div class="wmd-preview"></div>
</wicket:panel>
</html>
Resources
Updates
This works fine if there is only on Editor in a Page. If you want to use multiple editor in a single page then you have to use the reverse engineered version of Wmd-Editor. I am attaching a sample project which uses multiple editors Sample-project. Change it according to your needs.