Use the Orion Editor in your blog

As a quick follow up to the last post, we thought it would be worthwhile to mention 2 ways on how to embed the Orion editor in your blog. Depending on whether you want to make the editor always available for use on your blog, you can select to add the code either in the header or run it inline.

Header

If you are planning on posting lots of code to your blog, you might be better off in including your code in the header of your site. This is what we did for the planetorion.org site – which is a WordPress blog. We will also take a look at how to embed it in a Blogger site.

WordPress

To add the editor to you WordPress blog (assuming you have the necessary permissions to modify the blog), from the Dashboard select Appearance>Editor.

This will bring you to the Edit Themes page. From the Templates list on the right hand side, select “Header”. This will bring up the header.php code where we will insert the code for the editor.

Locate the last php tag before the closing </head> tag in the header.php – the php tag will contain the call to wp_head() – the orion editor code should be copied before the php tag.

Here is the code we used:

<!-- Orion Editor start-->

<!-- Global version -->
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/current/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/current/built-editor.js"></script>
<script>
	if (window.addEventListener) {
		window.addEventListener('load', function() {
			require(["orion/editor/edit"], function(edit) {
				edit({className: "editor"});
			});
		}, false);
	}
</script>

<!-- AMD version -->
<!--
<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/current/built-editor.css"/>
<script src="http://requirejs.org/docs/release/2.1.4/minified/require.js"></script>
<script>
	require(["http://eclipse.org/orion/editor/releases/current/built-editor-amd.min.js"], function(edit) {
		edit({className: "editor"});
	});
</script>
-->

<style>
pre.editor{
	padding: 0px;
	border: 1px solid lightgrey;
}
</style>
<!-- Orion Editor end-->

Two quick comments on the code. First of all we reference the 2.0 release in the code as it is the current stable release. If you want to live on the cutting edge, you can replace the 2.0 with 3.0 in all places to get the latest good build from the development stream. Second, notice that both versions of the build are included in the above snippet (although one is commented out) – use whichever one you prefer. You can also choose to modify the classname to something else – you just have to make sure to use the new name. For example if you change the classname in the header to:

//...snip ...
edit({className: "orionEditor"});
//... snip ...

all uses of the editor in your blog posts would then need to use this new name:

<pre class="orionEditor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
}
</pre>

Blogger

The same idea applies to Blogger blogs – if you want to be able to use the editor in all of your posts, you should put the code in the header. To get to the right place, select Template from the right hand side, and then click on the Edit HTML button to bring up the template.

We used the exact same code that we put in the WordPress header and we pasted it right before the closing </head> tag.

Using the Editor

Once you have added the editor code to your header files, you can use it anywhere in your blog by simply adding the class="editor" attribute to either a pre or div in your code that contains the code you want displayed in the editor.

Inline

If you just want to get a standalone snippet that you can use in your blog or on a page, Ken wrote a useful plugin you can install into your OrionHub account that will generate a standalone snippet for you right from your editor.

To install it, click on Get Plugins in the top Orion bar, and then click Install next to the Snippet plugin.

Once it’s installed you can open an editor instance and you will see a new Snippet button at the top of the editor. Select the code that you want to paste into your blog, hit the Snippet button and you will get a piece of selected code that’s ready to be copied into your blog (don’t forget to hit Ctrl+Z afterwards to get back your original editor contents).

– Bogdan & Silenio