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 RequireJS build)
(Orion Editor web page)
(25 intermediate revisions by 5 users not shown)
Line 8: Line 8:
 
= Getting the Build =
 
= 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 can grab the most recent editor code from the nightly builds or they can use the latest release available on the Orion download page.
 
* Users need to download (or directly link to) one type of build (either the RequireJS or standalone) and the common CSS file.
 
* Users need to download (or directly link to) one type of build (either the RequireJS or standalone) and the common CSS file.
  
Line 16: Line 16:
  
 
[[Image:EditorBuilds.png]]
 
[[Image:EditorBuilds.png]]
 +
 +
The built-editor.zip file contains several variants of the built editor component:
  
 
* '''build-editor-amd.min.js''' and '''built-editor-amd.js''' are the minified and non-minified versions of the RequireJS build.
 
* '''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.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.
 
* '''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 [http://eclipse.org/orion/editor/releases releases section].
 
  
 
= Using the Build =
 
= Using the Build =
 +
 +
The next sections will show the simplest way to embed an editor by using the orion/editor/edit function. Note if you want customize your editor (beyond the options provided by the edit function), you have access to the full editor in the build.
  
 
The following demos are going to start with the following html file then add in the built editor:
 
The following demos are going to start with the following html file then add in the built editor:
Line 39: Line 39:
 
<pre>
 
<pre>
 
/*
 
/*
  * This is a orion editor sample.
+
  * This is an Orion editor sample.
 
  */
 
  */
 
function() {
 
function() {
Line 60: Line 60:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
 
</head>
 
</head>
 
<body>
 
<body>
Line 72: Line 72:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/2.0/built-editor.min.js"></script>
+
<script src="http://eclipse.org/orion/editor/releases/4.0/built-editor.min.js"></script>
 
<script>
 
<script>
 
/*global require*/
 
/*global require*/
Line 93: Line 93:
 
<pre class="editor" data-editor-lang="js">
 
<pre class="editor" data-editor-lang="js">
 
/*
 
/*
  * This is a orion editor sample.
+
  * This is an Orion editor sample.
 
  */
 
  */
 
function() {
 
function() {
Line 110: Line 110:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/2.0/built-editor.min.js"></script>
+
<script src="http://eclipse.org/orion/editor/releases/4.0/built-editor.min.js"></script>
 
<script>
 
<script>
 
/*global require*/
 
/*global require*/
Line 124: Line 124:
 
<pre class="editor" data-editor-lang="js">
 
<pre class="editor" data-editor-lang="js">
 
/*
 
/*
  * This is a orion editor sample.
+
  * This is an Orion editor sample.
 
  */
 
  */
 
function() {
 
function() {
Line 145: Line 145:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
 
</head>
 
</head>
 
<body>
 
<body>
Line 160: Line 160:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
 
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
 
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
 
<script>
 
<script>
require(["http://eclipse.org/orion/editor/releases/2.0/built-editor-amd.min.js"], function(edit) {
+
require(["http://eclipse.org/orion/editor/releases/4.0/built-editor-amd.min.js"], function(edit) {
 
edit({className: "editor"});
 
edit({className: "editor"});
 
});
 
});
Line 172: Line 172:
 
... snip ...
 
... snip ...
 
</source>
 
</source>
* Add the '''className''' attribute to the code. Note you can also pass in other attributes that influence the editor configuration (see Attributes):
+
* Add the '''className''' attribute to the code. Note you can also pass in other options that influence the editor configuration (see : [[#Editor Options|editor options]]):
 
<source lang="xml">
 
<source lang="xml">
 
... snip ...
 
... snip ...
Line 180: Line 180:
 
<pre class="editor" data-editor-lang="js">
 
<pre class="editor" data-editor-lang="js">
 
/*
 
/*
  * This is a orion editor sample.
+
  * This is an Orion editor sample.
 
  */
 
  */
 
function() {
 
function() {
Line 198: Line 198:
 
<head>
 
<head>
 
<title>Orion Editor Sample</title>
 
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/2.0/built-editor.css"/>
+
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
 
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
 
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
 
<script>
 
<script>
require(["http://eclipse.org/orion/editor/releases/2.0/built-editor-amd.min.js"], function(edit) {
+
require(["http://eclipse.org/orion/editor/releases/4.0/built-editor-amd.min.js"], function(edit) {
 
edit({className: "editor"});
 
edit({className: "editor"});
 
});
 
});
Line 211: Line 211:
 
<pre class="editor" data-editor-lang="js">
 
<pre class="editor" data-editor-lang="js">
 
/*
 
/*
  * This is a orion editor sample.
+
  * This is an Orion editor sample.
 
  */
 
  */
 
function() {
 
function() {
Line 222: Line 222:
 
</source>
 
</source>
  
== Editor Attributes ==
+
== Editor Options ==
  
Here is the current list of attributes supported by the build for the 2.0 release. Note that these are liable to change in future releases.
+
Below is the current list of options(along with their default values) supported in the 4.0 release. The options can be specified directly in HTML by adding data attributes prefixed with "data-editor". Since HTML attributes are case insensitive, camel case letters are prefixed by a dash. For example: fullSelection becomes full-selection.
 +
 
 +
For example:
 +
 
 +
<source lang="xml">
 +
<pre class="editor" data-editor-full-selection="false" data-editor-readonly="true" data-editor-lang="js" data-editor-show-annotation-ruler="false">
 +
</source>
 +
 
 +
 
 +
Note that these may change in future releases.
 +
 
 +
<source lang="javascript">
 +
/**
 +
* @class This object describes the options for <code>edit</code>.
 +
* @name orion.editor.EditOptions
 +
*
 +
* @property {String|DOMElement} parent the parent element for the view, it can be either a DOM element or an ID for a DOM element.
 +
* @property {Boolean} [readonly=false] whether or not the view is read-only.
 +
* @property {Boolean} [fullSelection=true] whether or not the view is in full selection mode.
 +
* @property {Boolean} [tabMode=true] whether or not the tab keypress is consumed by the view or is used for focus traversal.
 +
* @property {Boolean} [expandTab=false] whether or not the tab key inserts white spaces.
 +
* @property {String} [themeClass] the CSS class for the view theming.
 +
* @property {Number} [tabSize=4] The number of spaces in a tab.
 +
* @property {Boolean} [wrapMode=false] whether or not the view wraps lines.
 +
* @property {Function} [statusReporter] a status reporter.
 +
* @property {String} [title=""] the editor title.
 +
* @property {String} [contents=""] the editor contents.
 +
* @property {String} [lang] the styler language. Plain text by default.
 +
* @property {Boolean} [showLinesRuler=true] whether or not the lines ruler is shown.
 +
* @property {Boolean} [showAnnotationRuler=true] whether or not the annotation ruler is shown.
 +
* @property {Boolean} [showOverviewRuler=true] whether or not the overview ruler is shown.
 +
* @property {Boolean} [showFoldingRuler=true] whether or not the folding ruler is shown.
 +
*/
 +
</source>
  
/**
+
[[Category:Orion|How To]]
* @class This object describes the options for <code>edit</code>.
+
[[Category:Orion/How To|Releng]]
* @name orion.editor.EditOptions
+
*
+
* @property {String|DOMElement} parent the parent element for the view, it can be either a DOM element or an ID for a DOM element.
+
* @property {Boolean} [readonly=false] whether or not the view is read-only.
+
* @property {Boolean} [fullSelection=true] whether or not the view is in full selection mode.
+
* @property {Boolean} [tabMode=true] whether or not the tab keypress is consumed by the view or is used for focus traversal.
+
* @property {Boolean} [expandTab=false] whether or not the tab key inserts white spaces.
+
* @property {String} [themeClass] the CSS class for the view theming.
+
* @property {Number} [tabSize=4] The number of spaces in a tab.
+
* @property {Boolean} [wrapMode=false] whether or not the view wraps lines.
+
* @property {Function} [statusReporter] a status reporter.
+
* @property {String} [title=""] the editor title.
+
* @property {String} [contents=""] the editor contents.
+
* @property {String} [lang] the styler language. Plain text by default.
+
* @property {Boolean} [showLinesRuler=true] whether or not the lines ruler is shown.
+
* @property {Boolean} [showAnnotationRuler=true] whether or not the annotation ruler is shown.
+
* @property {Boolean} [showOverviewRuler=true] whether or not the overview ruler is shown.
+
* @property {Boolean} [showFoldingRuler=true] whether or not the folding ruler is shown.
+
*/
+

Revision as of 09:47, 13 May 2015

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 download 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

The built-editor.zip file contains several variants of the built editor component:

  • 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.

Using the Build

The next sections will show the simplest way to embed an editor by using the orion/editor/edit function. Note if you want customize your editor (beyond the options provided by the edit function), you have access to the full editor in 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 an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Using the standalone build

  • These instructions are going to use the builds available on eclipse.org/orion.editor. If you have downloaded the built-editor.min.js and built-editor.css files to your local server, just update the corresponding paths.
  • Add in the css file:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/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="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/4.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 an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>
  • Your final file should look like this:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/4.0/built-editor.min.js"></script>
<script>
	/*global require*/
	require(["orion/editor/edit"], function(edit) {
		edit({className: "editor"});
	});
</script>
</head>
<body>
Here is some Javascript code:
 
<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Using the RequireJS build

  • These instructions are going to use the builds available on eclipse.org/orion.editor. If you have downloaded the built-editor-amd.min.js and built-editor.css files to your local server, just update the corresponding paths.
  • Add in the css file:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/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="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
<script>
	require(["http://eclipse.org/orion/editor/releases/4.0/built-editor-amd.min.js"], function(edit) {
		edit({className: "editor"});
	});
</script>
</head>
<body>
 
... snip ...
  • Add the className attribute to the code. Note you can also pass in other options that influence the editor configuration (see : editor options):
... snip ...
<body>
Here is some Javascript code:
 
<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>
  • Your final file should look like this:
<!doctype html>
<html>
<head>
<title>Orion Editor Sample</title>
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/4.0/built-editor.css"/>
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
<script>
	require(["http://eclipse.org/orion/editor/releases/4.0/built-editor-amd.min.js"], function(edit) {
		edit({className: "editor"});
	});
</script>
</head>
<body>
Here is some Javascript code:
 
<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>
</body>
</html>

Editor Options

Below is the current list of options(along with their default values) supported in the 4.0 release. The options can be specified directly in HTML by adding data attributes prefixed with "data-editor". Since HTML attributes are case insensitive, camel case letters are prefixed by a dash. For example: fullSelection becomes full-selection.

For example:

<pre class="editor" data-editor-full-selection="false" data-editor-readonly="true" data-editor-lang="js" data-editor-show-annotation-ruler="false">


Note that these may change in future releases.

/**
* @class This object describes the options for <code>edit</code>.
* @name orion.editor.EditOptions
*
* @property {String|DOMElement} parent the parent element for the view, it can be either a DOM element or an ID for a DOM element.
* @property {Boolean} [readonly=false] whether or not the view is read-only.
* @property {Boolean} [fullSelection=true] whether or not the view is in full selection mode.
* @property {Boolean} [tabMode=true] whether or not the tab keypress is consumed by the view or is used for focus traversal.
* @property {Boolean} [expandTab=false] whether or not the tab key inserts white spaces.
* @property {String} [themeClass] the CSS class for the view theming.
* @property {Number} [tabSize=4] The number of spaces in a tab.
* @property {Boolean} [wrapMode=false] whether or not the view wraps lines.
* @property {Function} [statusReporter] a status reporter.
* @property {String} [title=""] the editor title.
* @property {String} [contents=""] the editor contents.
* @property {String} [lang] the styler language. Plain text by default.
* @property {Boolean} [showLinesRuler=true] whether or not the lines ruler is shown.
* @property {Boolean} [showAnnotationRuler=true] whether or not the annotation ruler is shown.
* @property {Boolean} [showOverviewRuler=true] whether or not the overview ruler is shown.
* @property {Boolean} [showFoldingRuler=true] whether or not the folding ruler is shown.
*/

Back to the top