Skip to main content
Jump to: navigation, search

Orion/How Tos/Code Edit

< Orion‎ | How Tos
Revision as of 11:51, 2 July 2015 by (Talk | contribs) (Code Edit Widget With Language Tooling)

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 the complete language tooling, a new widget called "Code Edit" has been introduced.
  • The widget consists of the widget core and all language tooling plugins.
  • The widget is delivered as a zip file containing all the structural folders and files, making the core and the plugins all work together.
  • Users consume the widget core directly. The language tooling plugins are only loaded when needed.
  • The widget core is available both unminified, for debugging purpose and minified, for better loading time.
  • The plugins are only available in minified version.

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. Below is a complete run-able html file that you can host in your web server as a demo on how to consume the widget. Assume that you have created a folder named editorBuild under where your html file lives. Follow the 3 steps below and you can run the demo in just a few minutes.

  • Download the code edit build and unzip it under the editorBuild folder.
  • Create a demo.html and paste the example contents into the demo.html.
  • Run the demo.html.
<!doctype html>
		<meta name="copyright" content="Copyright (c) IBM Corporation and others 2010, 2014." >
		<meta http-equiv="Content-Language" content="en-us">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Pluggable Editor Demo</title>
		<style type="text/css">
				border: none;
				vertical-align: middle;
				overflow: hidden;
				text-align: left;
				margin-left: 15%;
				margin-right: 15%;
				padding-bottom: 5px;
				position: relative;
				border: 1px solid;
				vertical-align: middle;
				border-color: blue;
				overflow: hidden;
				text-align: left;
				margin-left: 15%;
				margin-right: 15%;
				margin-bottom: 15px;
				padding-bottom: 5px;
				position: relative;
				height: 450px;
	    <link rel="stylesheet" type="text/css" href="editorBuild/code_edit/built-codeEdit.css"/>
		<script src="editorBuild/code_edit/built-codeEdit.js"></script>
			/*globals orion */
				var codeEdit = new orion.codeEdit();
				var contents = 'var foo = "bar";\n' +
									 "var bar = foo;\n" + 
									 "/*\n" + 
									 " * test demo\n" + 
									 "*/\n" + 
									 "function test(){\n" + 
									 "	var foo1 = bar.lastIndexOf(char, from);\n" + 
									 "}\n" + 
									"//Keep editting in this demo and try the content assit, probem validations and hover service!\n" +
									 "var foo2 = foo."; 
				codeEdit.create({parent: "embeddedEditor", contentType: "application/javascript", contents: contents}).then(function(editorViewer) {
					document.getElementById("progressMessageDiv").textContent = "Plugins loaded!";
					//You can call APIs from editorViewer.editor  for further actions.
	<body id="orion-browser" spellcheck="false" class="orionPage">
		<div class="demoTitle">
			<div>This is a demo for the <b>Orion Code Edit</b> widget. This demo consumes the <b>build version</b> of the widget.</div> 
			<div> Keep editing in this demo and try:</div>
			<div> 1.content assist. E.g., put cursor after "foo." at the last line and press CTRL+space.</div>
			<div> 2.probem validations. E.g., modify something and you will see new validation markers coming up, if any</div>
			<div> 3.hover service. Hover on any error markers or inside the eidtor.</div>
			<div> 4.syntax highlighting</div>
			<div> 5.Quick fix. Hover on a problem inside the eidtor, not on the ruler, e.g., (char, from) in this demo. Click on the quick fix and see.</div>
			<div> 6.Find declaration. Select a variable and press f3.</div>
			<div> tooling features coming while Orion is being improved...</div>
		<div class="demoTitle">
			<span id = "progressMessageDiv" style="color: green">Loading language tooling plugins...</span>
		<div class="demoBody" id="embeddedEditor">

Your demo page should look like this, if you use CTRL+space as content assist after the page is loaded.


Back to the top