Examples of Embedding The Orion Editor

Several people have recently asked for help or examples on how to embed the Orion editor. Part of the confusion stems from old sample code and blog posts floating around that are based on older versions of Orion. Rather than providing yet another blog post containing examples that will soon get stale, I refer you instead to the examples included in the Orion source tree. These examples are regularly updated along with the Orion editor itself whenever there are changes, so you should always be able to see the latest working code.

There are three examples currently available:

  1. Minimal editor example. This is the simplest example of using the Orion editor in a web page. The minimaleditor.js script shows configuring and creating the editor, with a very basic “save” key binding. You can also see how to configure the editor to report errors, and how to add annotations to the text (such as underlining syntax errors). See the running example on OrionHub to play around with it.
  2. Embedded editor example. This is a more complex editor example that shows how to use many of the editor’s core APIs. The example creates an editor with content assist, syntax highlighting, error annotations, and a complete set of basic editing key bindings. Try it out on OrionHub.
  3. Text view example. This is an example of using the Orion “text view”, which is the low level widget underlying the Orion editor. Directly using the text view is really a “do it yourself” approach for advanced use cases. The example lets you configure the text view with various different kinds of options and file types. There is also some performance testing infrastructure built into this example which you will need to strip out. Try it on OrionHub. You will need to scroll to the bottom and click one of the links to instantiate the editor (such as JavaScript to create an editor populated with some JavaScript code).

All of these examples use the RequireJS module loader. Although it is possible to use the Orion editor without RequireJS, it is the easiest way to configure more advanced applications using the Orion editor. If you are trying these examples out, you need to make sure RequireJS is available. If you have cloned the Orion Client Git repository, you can do this by copying the folder bundles/org.eclipse.orion.client.core/web/requirejs into the folder bundles/org.eclipse.orion.client.editor/web (or ensure these two web folders are mounted at the same path in your server configuration).

If you encounter any problems with these examples, please report a bug.

Enjoy!

This entry was posted in Tips & Tricks. Bookmark the permalink.