Hi there,
i want to implement en ACE editor component in my own library
so i drop all ace dist files into META-INV/assets/mylib/ace classpath
and wrote the module "editor"
(function () {
define(["jquery"], function ($) {
var aceEditor;
aceEditor = function (spec) {
var textarea = $('#' + spec.textAreaId).hide();
textarea.hide();
ace.config.set("themePath", spec.basePath);
ace.config.set("modePath", spec.basePath);
var editor = ace.edit(spec.elementId);
editor.setTheme(spec.editorTheme);
editor.getSession().setMode(spec.editorMode);
editor.getSession().setValue(textarea.value);
editor.setFontSize(16);
editor.setHighlightActiveLine(true);
editor.getSession().on('change', function () {
textarea.setValue(editor.getSession().getValue());
});
};
return {CodeEditor: aceEditor};
});
}).call(this);
my component looks like
@Import(library = {"ace/ace.js"})
public class AceEditor
{
/**
***********************************************************
* statics
* **********************************************************
*/
/**
* **********************************************************
* parameters
* **********************************************************
*/
@Parameter(required = false, value = "javascript", defaultPrefix =
BindingConstants.LITERAL, name = "type")
private String scriptType;
@Parameter(required = false, value = "chrome", defaultPrefix =
BindingConstants.LITERAL)
private String theme;
/**
* **********************************************************
* injected services
* **********************************************************
*/
@Environmental
private JavaScriptSupport javaScriptSupport;
@Inject
private AssetSource assetSource;
/**
* **********************************************************
* injected symbol, ASO, etc
* **********************************************************
*/
@InjectContainer
private Field container;
/**
***********************************************************
* components
* **********************************************************
*/
/**
***********************************************************
* properties
* **********************************************************
*/
/**
* **********************************************************
* phase processing
* **********************************************************
*/
@BeginRender
void beginRender(MarkupWriter writer)
{
}
@AfterRender
void afterRender(MarkupWriter writer)
{
Element element = writer.getElement();
Element textArea = element.find("textarea");
String style = textArea.getAttribute("style");
if (!container.isDisabled())
{
JSONObject spec = new JSONObject();
String divId = container.getClientId() + "_Ace";
spec.put("elementId", divId);
spec.put("textAreaId", container.getClientId());
spec.put("editorMode", scriptType);
spec.put("editorTheme", theme);
spec.put("basePath",
assetSource.getClasspathAsset("META-INF/assets/core5/ace").toClientURL());
spec.put("basePath",
assetSource.getClasspathAsset("META-INF/assets/core5/ace").toClientURL());
javaScriptSupport.require("codeeditor").invoke("CodeEditor").with(spec);
writer.element("div", "id", divId, "style", style);
writer.end();
}
}
/**
***********************************************************
* event handlers & processing
* **********************************************************
*/
/**
***********************************************************
* getters & setters
* **********************************************************
*/
/**
***********************************************************
* helpers
* **********************************************************
*/
}
so the given theme and mode should load by component parameters.
but the theme or mode files never load by ace cause HTTP 404
where is my fault?
