Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Orion/How Tos/Editor Build"

< Orion‎ | How Tos
(Using the standalone build)
(Using the standalone build)
Line 66: Line 66:
 
... snip ...
 
... snip ...
 
</source>   
 
</source>   
 +
* Add in the editor file. Note that you can change '''className''' to be whatever you want (it just has to match up the classname you use in the body for the editor):
 +
<source lang="xml">
 +
<!doctype html>
 +
<html>
 +
<head>
 +
<title>Orion Editor Sample</title>
 +
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
 +
<script src="http://eclipse.org/orion/editor/releases/2.0/built-editor.min.js"></script>
 +
<script>
 +
/*global require*/
 +
require(["orion/editor/edit"], function(edit) {
 +
edit({className: "editor"});
 +
});
 +
</script>
 +
</head>
 +
<body>
 +
 +
... snip ...
 +
</source>
 +
* Add the '''className''' attribute to the code. Note you can also pass in other attributes that influence the editor configuration (see Attributes):
 +
<source lang="xml">
 +
... snip ...
 +
<body>
 +
Here is some Javascript code:
 +
 +
<pre class="editor" data-editor-lang="js">
 +
/*
 +
* This is a orion editor sample.
 +
*/
 +
function() {
 +
    var a = 'hi there!';
 +
    window.console.log(a);
 +
}
 +
</pre>
 +
</body>
 +
</html>
 +
</source>
 +
 +
== Using the RequireJS build ==
 +
 +
* These instructions are going to assume that you have downloaded the standalone build '''built-editor-amd.min.js''' and css file to the same folder as html file from above.
 +
 +
* Add in the css file:
 +
<source lang="xml">
 +
<!doctype html>
 +
<html>
 +
<head>
 +
<title>Orion Editor Sample</title>
 +
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
 +
</head>
 +
<body>
 +
 +
... snip ...
 +
</source> 
 +
* Add in the RequireJS file. You can use a local one or link to one.
 +
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
 +
 
* Add in the editor file. Note that you can change '''className''' to be whatever you want (it just has to match up the classname you use in the body for the editor):
 
* Add in the editor file. Note that you can change '''className''' to be whatever you want (it just has to match up the classname you use in the body for the editor):
 
<source lang="xml">
 
<source lang="xml">

Revision as of 18:37, 11 February 2013

Editor Builds

  • In order to make the Orion editor easier to consume, 2 new nightly builds have been introduced.
  • One build is targeted at users who already use the RequireJS module loader.
  • The other build is targeted at users who want to embed the editor without any other dependencies.
  • The builds are identical in functionality and are available both minified and non-minified.

Getting the Build

  • Users can grab the most recent editor code from the nightly builds or they can use the latest release available on the Orion editor web page.
  • Users need to download (or directly link to) one type of build (either the RequireJS or standalone) and the common CSS file.

Nightly builds & Releases

  • From the Orion build page, users can click on a nightly build or a release (starting with 2.0) and they will be presented with a page that now includes the built editor components:

EditorBuilds.png

  • build-editor-amd.min.js and built-editor-amd.js are the minified and non-minified versions of the RequireJS build.
  • built-editor.min.js and built-editor.js are the minified and non-minified versions of the standalone build.
  • built-editor.css is the built css file and is needed by both builds.

Orion Editor web page

  • The built editor files will also be available directly from the Orion editor web page releases section.

Using the Build

The following demos are going to start with the following html file then add in the built editor:

<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
</head>
<body>
Here is some Javascript code:
 
<pre>
/*
 * This is a orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Using the standalone build

  • These instructions are going to assume that you have downloaded the standalone build built-editor.min.js and css file to the same folder as html file from above.
  • Add in the css file:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
</head>
<body>
 
... snip ...
  • Add in the editor file. Note that you can change className to be whatever you want (it just has to match up the classname you use in the body for the editor):
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/2.0/built-editor.min.js"></script>
<script>
	/*global require*/
	require(["orion/editor/edit"], function(edit) {
		edit({className: "editor"});
	});
</script>
</head>
<body>
 
... snip ...
  • Add the className attribute to the code. Note you can also pass in other attributes that influence the editor configuration (see Attributes):
... snip ...
<body>
Here is some Javascript code:
 
<pre class="editor" data-editor-lang="js">
/*
 * This is a orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Using the RequireJS build

  • These instructions are going to assume that you have downloaded the standalone build built-editor-amd.min.js and css file to the same folder as html file from above.
  • Add in the css file:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
</head>
<body>
 
... snip ...
  • Add in the RequireJS file. You can use a local one or link to one.

<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>

  • Add in the editor file. Note that you can change className to be whatever you want (it just has to match up the classname you use in the body for the editor):
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/2.0/built-editor.min.js"></script>
<script>
	/*global require*/
	require(["orion/editor/edit"], function(edit) {
		edit({className: "editor"});
	});
</script>
</head>
<body>
 
... snip ...
  • Add the className attribute to the code. Note you can also pass in other attributes that influence the editor configuration (see Attributes):
... snip ...
<body>
Here is some Javascript code:
 
<pre class="editor" data-editor-lang="js">
/*
 * This is a orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Back to the top