Tuesday, January 3, 2012

Using the Orion Editor with Almond

In my last post I gave instruction how to use the Orion Editor without requirejs, since then the code changed quite a bit and the instructions in the last post no longer work. We changed all the editor files to follow the AMD spec (you can find more details about this change here). It is still possible to use the editor without requirejs but you will need to use an AMD "shim" loader. The one I recommend is almond.

To illustrate how to use the editor with almond I decided to write an simple application for that. It is actually an upgrade of the code snippet written by Andrew Niefer in this post. You can find my version of the code in gist.

Besides changing the snippet to use requirejs I have also added a few extra features.

Here are the instructions:

First, in your blog post add a pre element with the attribute name set to "orion".
Then, in the class attribute you can specify the following parameters:

  • writable - if set the element is writable.
  • ruler - if set the line numbering ruler is shown.
  • js - use the javascript syntax highlight styler.
  • java - use the java syntax highlight styler.
  • css - use the css syntax highlight styler.
  • html - use the html syntax highlight styler.
Last, at the end of your blog added these lines:
<script src="http://planetorion.org/editor/orionformatterbuilt.js"></script>
<script type="text/javascript">
 require("examples/textview/orionformatter");
</script>
Here is an example:
<pre name="orion" class="js ruler writable">
var this = "is some javascript code";
</pre>
This gets rendered to:
var this = "is some javascript code";
Now that the introduction part is over I'd like to talk about the process I used to create the orionformatterbuilt.js file which is the compiled version of orionformatter.js.

First lets take a look at what a html page with requirejs needs to do use orionformatter.js:

<!DOCTYPE html>
<html>
<head>
<script data-main="orionformatter" src="../../requirejs/require.js"></script>
<script type="text/javascript">
 require({
   baseUrl: '../..'
 });
</script>
</head>
<body>
<h3>Orion Text View Demo: using Orion Formatter and RequireJS</h3>
<pre name="orion" class="js writable ruler" style="border: 1px solid teal;">
/* Some js code */
function log (text) {
 var console = window.document.getElementById('console');
 showConsole();
}
</pre>
</body>
</html>
It only needs to include "requirejs/require.js" and point data-main="orionformatter", very clean. The second script element setting the baseUrl was just necessary because our directory structure is a bit different.

The next step is to replace requirejs by almond.

<!DOCTYPE html>
<html>
<head>
<script src="/examples/textview/almond.js"></script>
<script src="/examples/textview/orionformatterbuilt.js"></script>
<script src="/examples/textview/orionformatter.js"></script>
<script src="/orion/textview/eventTarget.js"></script>
<script src="/orion/textview/textModel.js"></script>
<script src="/orion/textview/keyBinding.js"></script>
<script src="/orion/textview/textView.js"></script>
<script src="/orion/textview/projectionTextModel.js"></script>
<script src="/orion/textview/tooltip.js"></script>
<script src="/orion/textview/rulers.js"></script>
<script src="/orion/editor/regex.js"></script>
<script src="/orion/editor/textMateStyler.js"></script>
<script src="/orion/editor/htmlGrammar.js"></script>
<script src="/orion/textview/annotations.js"></script>
<script src="/examples/textview/textStyler.js"></script>
<script type="text/javascript">
 function onload() {
  require("examples/textview/orionformatter");
 }
</script>
</head>
<body onload="onload();">

<h3>Orion Text View Demo: using Orion Formatter and Almond</h3>

<pre name="orion" class="js writable ruler" style="border: 1px solid teal;">
/* Some js code */
function log (text) {
 var console = window.document.getElementById('console');
 showConsole();
}
</pre>

</body>
</html>
Note that to use almond directly it was needed to include all the required files manually. Another difference is that requirejs ensures that orionformatter only runs when the dom is ready. With almond we don't get that, that is why the load event handler was necessary.

Now is the time to run the requirejs optimizer on almond. This is the magic:

$ node r-edge.js -o baseUrl=../.. name=examples/textview/almond include=examples/textview/orionformatter.js out=orionformatterbuilt.js uglify.ascii_only=true

Notes:

  • uglify.ascii_only=true was needed because textView uses unicode characters
  • r-edge.js was used because of a bug in r.js, this will soon be fixed.
  • See orionformatter.js line 16, without this line almond did not work (for me).
  • The doc suggests to pass wrap=true to the optimizer, in this case that can't be used as the load event handler needs to call the require method.
Now using orionformatterbuilt.js the html above can be simplified to this:
<!DOCTYPE html>
<html>
<head>
<script src="orionformatterbuilt.js"></script>
<script type="text/javascript">
 function onload() {
  require("examples/textview/orionformatter");
 }
</script>
</head>
<body onload="onload();">

<h3>Orion Text View Demo: using Orion Formatter and Almond (optimized version)</h3>

<pre name="orion" class="js writable ruler" style="border: 1px solid teal;">
/* Some js code */
function log (text) {
 var console = window.document.getElementById('console');
 showConsole();
}
</pre>

</body>
</html>
In some cases, like when using the Orion Formatter with Blogger, it might not be possible to add a load event handler to the body. The workaround is add the script elements at the end of the body. The html would look like this:
<!DOCTYPE html>
<html>
<body>

<h3>Orion Text View Demo: using Orion Formatter and Almond (final version)</h3>

<pre name="orion" class="js writable ruler" style="border: 1px solid teal;">
/* Some js code */
function log (text) {
 var console = window.document.getElementById('console');
 showConsole();
}
</pre>


<script src="orionformatterbuilt.js"></script>
<script type="text/javascript">
 require("examples/textview/orionformatter");
</script>
</body>
</html>

5 comments:

  1. Nice summary. As of RequireJS 1.0, the dom ready code is not included in require.js, but there is a stand-alone plugin, domReady.js that can be used to get the equivalent of the old require.ready, and it should work with almond:

    http://requirejs.org/docs/api.html#pageload

    ReplyDelete
  2. Whats Going down i am new to this, I stumbled upon this I've discovered It positively useful and it has aided me out loads. I'm hoping to give a contribution & help other customers like its aided me. Great job.
    ZetaClear Zeta Clear Nail Fungus Formula 2 - 1/2 Fl Oz Bottles

    ReplyDelete
  3. Very interesting blog.I look forward to reading more on the topic in the future. Keep up the good work.Love it.

    online proofreader

    ReplyDelete