No warranties implied, however this is the code I use to integrate ACE.
It's a single page application, and I think ace.js is included in the HTML
of the main page application.
/**
* The AcePanel is the Ace Editor and it's Affiliate Sidebar, Saving and
Integration with the System.
*
* It's a bit different then the other
* Created by Adam on 4/5/14.
*/
public class Ace extends Panel {
private static final Gson gson = new
GsonBuilder().disableHtmlEscaping().create();
public Ace(String id, Model<File> model) {
super(id, model);
setOutputMarkupId(true);
TemplateFile tf = new TemplateFile(model.getObject());
add(new AceForm("aceForm",model));
}
@Override
public MarkupContainer setDefaultModel(IModel<?> model) {
super.setDefaultModel(model);
return this;
}
public class AceForm extends Form {
private final WebMarkupContainer editor;
private final HiddenField hiddenValue;
String value;
public void setValue(String value) {
this.value = value;
}
public String getValue() {
return value;
}
@Override
public void renderHead(IHeaderResponse response) {
File file = (File)
com.metalrain.simple.core.editor.panels.Ace.this.getDefaultModelObject();
String content = null;
String mode = "ace/mode/text";
try {
content = gson.toJson(FileUtils.readFileToString(file,
"UTF8"));
Media.Format format = Media.Format.fromFile(file);
switch (format) {
case HTML:
mode = "ace/mode/html";
break;
case JS:
mode = "ace/mode/javascript";
break;
case CSS:
mode = "ace/mode/css";
break;
default:
mode = "ace/mode/text";
break;
}
} catch (IOException e) {
content = "error";
e.printStackTrace();
}
//3 Javascripts.
//1 - Load Editor and Load File
//2 - Listen for Events from Websocket (Request Save) (When
this - Do the next thing Websocket in->Ajax out)
//3 - Wicket Ajax Postback for saving
//To re-iterate, we need to load contents into the editor, we
need to be able to receieve websocket request to save
//We also need to be able to post the results.
final String initAce = "var editor=ace.edit(\"" +
editor.getMarkupId() + "\");editor.setValue(" + content +
");editor.getSession().setMode(\"" + mode +
"\");editor.getSelection().clearSelection();\n\n";
response.render(OnDomReadyHeaderItem.forScript(initAce));
}
public AceForm(String id, final IModel<File> model) {
super(id, model);
add(new FileBrowser(new Model((new TemplateFile((File)
com.metalrain.simple.core.editor.panels.Ace.this.getDefaultModelObject())).getWebsite()))
{
@Override
protected void clickFile(AjaxRequestTarget target, File
file) {
MessageHelpers.editEventMessage(target, new Model(new
File(file.getAbsolutePath())));
}
});
add(editor = new WebMarkupContainer("editor"));
add(hiddenValue = new HiddenField("value", new
PropertyModel(this, "value")));
TemplateFile file = new TemplateFile(model.getObject());
add(new Label("production", file.getWebsite().getProduction()));
add(new Label("environment",
SessionService.get().getAdminSession(Session.get()).getEnv()));
//Cancel and Return
add(new FileDetails("fileDetails", new
CompoundPropertyModel(model.getObject()),new Model(file.getWebsite())));
add(new MyAjaxSubmitLink("submit") {
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?>
form) {
super.onSubmit(target, form);
saveFile();
}
});
}
/**
* Get the path to the currently edited file, and save what is
posted
* If it's a .scss file, let's compile as well.
*/
private void saveFile() {
String path =
com.metalrain.simple.core.editor.panels.Ace.this.getDefaultModelObjectAsString();
try {
FileUtils.write(new File(path), value);
} catch (IOException e) {
e.printStackTrace();
}
if (path.endsWith(".scss")) {
TemplateFile file = new TemplateFile(path);
file.invokeCompass();
}
}
private class MyAjaxSubmitLink extends AjaxSubmitLink {
public MyAjaxSubmitLink(String id) {
super(id);
}
@Override
public void renderHead(IHeaderResponse response) {
/**
* When you click THIS button (AjaxSubmitLink), it'll
assign the ace editor content to a form field
* before post. Because ACE is a div and not a form
component.
*/
final String clickAlert = "$('#"+getMarkupId()+"')" +
".click(" +
"function()" +
"{" +
"$('#"+hiddenValue.getMarkupId()+"').val(ace.edit(\"" +
editor.getMarkupId() + "\").getValue());"+
"}" +
");";
response.render(OnDomReadyHeaderItem.forScript(clickAlert));
}
}
}
}
----------------------------------------
<html>
<head>
<title></title>
</head>
<body>
<wicket:panel>
<div class="AcePanel">
<form wicket:id="aceForm">
<div id="AceSidebar" class="WebsiteSidebar">
<div class="top">
<h2 class="SidebarTitle" >
<div wicket:id="production" >Website </div>
<div class="footer" wicket:id="environment"
>Environment </div>
</h2>
<div class="SidebarForm" wicket:id="fileDetails" > File
Details </div>
<button wicket:id="submit" type="submit"
style="width:100%;" > Save File </button>
<div class="Section">
<input type="hidden" wicket:id="value"/>
</div>
</div>
<div class="bottom">
<div class="SidebarForm" style="min-height:98%"
wicket:id="fileBrowser"/>
</div>
</div>
<div class="AceEditor" wicket:id="editor"></div>
</form>
</div>
</wicket:panel>
</body>
</html>
On Mon, Mar 16, 2015 at 4:46 AM, Tom Götz <[email protected]> wrote:
> Hi folks,
>
> has anybody already done a successful Wicket integration of the Ace code
> editor (https://github.com/ajaxorg/ace <https://github.com/ajaxorg/ace>)
> and is willing to share it (or at least some code snippets)?
>
> -Tom
>
>
>
