Skip to main content
Jump to: navigation, search

Orion/How Tos/Code Edit

< Orion‎ | How Tos
Revision as of 14:38, 5 June 2015 by Libingw.ca.ibm.com (Talk | contribs) (Created page with "= Code Edit Widget With Language Tooling = * In order for users to consume the Orion editor with language tooling fully loaded, a new widget called "Code Edit" have been int...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Code Edit Widget With Language Tooling

  • In order for users to consume the Orion editor with language tooling fully loaded, a new widget called "Code Edit" have been introduced.
  • The build is available both minified and non-minified.

Getting the Build

  • Users can grab the most recent "Code Edit" widget from the nightly builds or they can use the latest release available on the Orion download page.

Nightly builds & Releases

  • From the Orion build page, users can click on a nightly build or a release and they will be presented with a page that now includes the code edit widget: the built-codeEdit.zip file contains all the files for you to embed the widget.

Using the Build

You can simply download the zip file and unzip it into a folder on your web server. The code example shows how your html file will look, to consume the widget.

<!doctype html>
<html>
    <head>
		<title>Embed code edit widget</title>
	    <link rel="stylesheet" type="text/css" href="../build/code_edit/built-codeEdit.css"/>
	    <link rel="stylesheet" type="text/css" href="demo.css"/>
		<script src="../build/code_edit/built-codeEdit.js"></script>
		<script>
		window.onload=function(){
			var codeEdit = new orion.codeEdit();
			var contents = 'var foo = "bar";\n'
			var contents1 = "<span>foo2</span>"; 
			codeEdit.create({parent: "embeddedEditor"}).then(function(editorViewer) {
				document.getElementById("progressMessageDiv").textContent = "Plugins loaded!";
				editorViewer.setContents(contents, "application/javascript");
			});
			codeEdit.create({parent: "embeddedEditor1",
								   contentType: "text/html",
								   contents: contents1});
		};
		</script>
    </head>
	<body id="orion-browser" spellcheck="false" class="orionPage">
		<div class="embeddedEditorDemoTextParent">
			<span id = "progressMessageDiv" style="color: green">Loading language tooling plugins...</span>
		</div>
		</div>
		<div class="embeddedEditorParentOuter" id="embeddedEditor">
		</div>
		<div class="embeddedEditorParentOuter" id="embeddedEditor1">
		</div>
	</body>
</html>

Copyright © Eclipse Foundation, Inc. All Rights Reserved.