Embed the latest Orion Editor in your code in 2 steps

The Orion editor has been packaged into 2 standalone builds to help make it easier to use. These are available from the Orion build page.

Here is how you can get the latest release and embed it in your Javascript code:

Step 1: Add the following lines somewhere in your head section to get the built css and editor files:

<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/current/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/current/built-editor.min.js"></script>
<script>
	require(["orion/editor/edit"], function(edit) {
		edit({className: "editor"});
	});
</script>

Step 2: Add the editor class and some data attributes to the HTML element containing the code you want to display in the editor.

<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>

Done!

The editor features can be customized by passing in data attributes. Here is the current available list with the defaults:

/**
	 * @class This object describes the options for edit.
	 * @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.
	 */

To customize your editor, simply add data attributes prefixed with “data-editor-“. Since HTML attributes are case insensitive, camel case letters are prefixed by a dash. For example to create a Javascript editor with only the line ruler showing, you would create the editor like this:

<pre class="editor" data-editor-lang="js" data-editor-show-annotation-ruler="false" 
data-editor-show-overview-ruler="false" data-editor-show-folding-ruler="false"
>
/*
 * This is a orion editor sample.
 */
function() {
    var b = 'no rulers here!';
    window.console.log(a);
}
</pre>

Here is what this will look like:

/*
 * This is an Orion editor sample.
 */
function() {
    var b = 'no rulers here!';
    window.console.log(a);
}

Stay tuned for more posts on the Orion editor – for more info on the new builds check out the editor build wiki page.