Skip to main content
Jump to: navigation, search

Orion/How Tos/Code Edit

This page is still under construction. More information will come soon!

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 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>
		<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>
			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});
	<body id="orion-browser" spellcheck="false" class="orionPage">
		<div class="embeddedEditorDemoTextParent">
			<span id = "progressMessageDiv" style="color: green">Loading language tooling plugins...</span>
		<div class="embeddedEditorParentOuter" id="embeddedEditor">
		<div class="embeddedEditorParentOuter" id="embeddedEditor1">

Back to the top