Orion/How Tos/Code Edit
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 built-codeEdit.zip 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.
Your demo page should look like this, if you use CTRL+space as content assist after the page is loaded.
Consuming the widget in different ways
Closer look at the build
If you unzip the build, the file structure looks like below:
There are several file folders in the build but you should only deal with the files under the code_edit folder. The built-codeEdit.css file provides all the default css classes used int the widget. The built-codeEdit.min.js file provides the widget core code in a compact size while the built-codeEdit.js file provides the readable code for debugging purpose. Both of the .js files can be consumed by either loading the widget directly or using the RequireJS module loader.
Loading the widget directly
Assuming that you've unzipped the build into a folder called editorBuild, the following code in an html file shows you how to load the widget.