| How to enable syntax highlighting for javascript ? [message #1416148] |
Thu, 04 September 2014 08:34  |
Eclipse User |
|
|
|
Hi.
My question is, how is it possible to enable the syntax highlighting for javascript or access the syntaxHighlighter Object?
I have required the built-editor.js Release 5.0 var editor = require('built-editor-5.0.js)
Via
var options = {
parent: this._domNodeId,
lang: 'js',
contentType: 'js'
}
this._editor = editor.orion.editor.edit(options);
The problem is, i can only access the edit().
Thanks in advance
King Regards
Georg
|
|
|
| Re: How to enable syntax highlighting for javascript ? [message #1417671 is a reply to message #1416148] |
Fri, 05 September 2014 17:44  |
| Eclipse User |
|
|
|
- Does the call to editor.orion.editor.edit(options) succeed? Does it create a working text editor out of this._domNodeId?
- Do you see any errors in your browser's JS console?
When the editor is created successfully, JavaScript syntax highlighting should be enabled automatically by the contentType: "js" option. You should not need to access the syntaxHighlighter object.
Please note that, if you are loading the non-AMD version of the Orion editor, the edit function will be exported as a global variable orion.editor.edit(), and the require() call will return undefined. Therefore you must access the editor through window.orion.editor.edit() not editor.orion.editor.edit(). If you want to load the editor as an AMD module, you must use built-editor-amd.
Here is a working example of how to create the editor using RequireJS + AMD modules. Note that the require() call is asynchronous so we have to pass a callback.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/5.0/built-editor.css"/>
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
</head>
<body>
<pre id="myEditor">
function(a) {
console.log("This is JavaScript");
}
</pre>
<script>
require(["http://eclipse.org/orion/editor/releases/5.0/built-editor-amd.min.js"], function(edit) {
var options = {
parent: 'myEditor',
contentType: 'js'
};
this._editor = edit(options);
});
</script>
</html>
And here's an example of creating the editor with plain <script> tags, no AMD loader. Note we use the global window.orion.editor.edit():
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/5.0/built-editor.css"/>
</head>
<body>
<pre id="myEditor">
function(a) {
console.log("This is JavaScript");
}
</pre>
<script src="http://eclipse.org/orion/editor/releases/5.0/built-editor.min.js"></script>
<script>
var options = {
parent: 'myEditor',
contentType: 'js'
};
this._editor = orion.editor.edit(options);
</script>
</html>
I put the <script> tags in both examples at the bottom of the page, to ensure that the DOM is ready before we try to create the editor. There are other ways of waiting for the DOM, but this is the easiest.
|
|
|
|
Powered by
FUDForum. Page generated in 0.07495 seconds
Home