Skip to main content
Jump to: navigation, search

Orion/How Tos/Code Edit

< Orion‎ | How Tos
Revision as of 12:09, 2 July 2015 by (Talk | contribs) (Using the build and the quick start demo)

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.
  • 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 and the quick start demo

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. The same demo is also running here, where you can see it right away.

  • 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