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:
- 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.
- 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.
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.