Meta tags:
description=;

Headings (most frequently used words):

orion, editor, the, january, 2012, blog, monday, march, 18, 2013, friday, tuesday, archive, followers, now, on, planet, how, to, load, content, in, your, iframe, using, with, almond,

Text of the page (most frequently used words):
the (114), script (51), orion (38), var (35), #iframe (34), html (33), this (22), textview (21), that (19), load (19), src (19), document (17), editor (16), for (16), use (14), text (14), almond (13), code (12), orionformatter (12), using (12), iframeloaded (12), body (11), pre (11), head (11), framewindow (11), requirejs (10), not (10), function (10), examples (10), css (10), share (9), and (9), all (9), was (9), some (9), doctype (9), blog (8), require (8), when (8), with (8), console (8), javascript (8), can (7), version (7), event (7), name (7), writable (7), ruler (7), style (7), orionformatterbuilt (7), true (7), are (7), contentwindow (7), files (6), you (6), element (6), handler (6), class (6), onload (6), framedocument (6), problem (6), now (5), last (5), post (5), here (5), include (5), formatter (5), view (5), window (5), type (5), write (5), problems (5), createelement (5), january (4), without (4), will (4), used (4), our (4), another (4), above (4), demo (4), border (4), 1px (4), solid (4), teal (4), log (4), getelementbyid (4), showconsole (4), first (4), syntax (4), highlight (4), styler (4), set (4), false (4), addeventlistener (4), return (4), firefox (4), loaded (4), link (4), 2012 (3), planet (3), posts (3), pinterest (3), facebook (3), blogthis (3), email (3), comments (3), posted (3), how (3), changed (3), work (3), possible (3), your (3), over (3), like (3), which (3), only (3), needs (3), main (3), baseurl (3), because (3), needed (3), add (3), look (3), line (3), time (3), page (3), content (3), solution (3), does (3), from (3), parent (3), blogger (2), march (2), 2013 (2), felipe (2), heidrich (2), since (2), then (2), bit (2), instructions (2), amd (2), find (2), more (2), about (2), change (2), but (2), need (2), one (2), end (2), added (2), these (2), process (2), data (2), second (2), just (2), necessary (2), note (2), dom (2), get (2), why (2), workaround (2), optimizer (2), case (2), method (2), edge (2), uglify (2), ascii_only (2), next (2), step (2), take (2), what (2), java (2), attribute (2), snippet (2), also (2), few (2), most (2), way (2), times (2), called (2), webkit (2), sends (2), before (2), after (2), events (2), forward (2), causes (2), any (2), undefined (2), there (2), uri (2), info (2), awesome, inc, theme, powered, followers, august, 2011, archive, subscribe, atom, home, older, gave, instruction, quite, longer, follow, spec, details, still, shim, loader, recommend, lines, example, gets, rendered, introduction, part, talk, create, file, compiled, point, very, clean, setting, directory, structure, different, directly, required, manually, difference, ensures, runs, ready, don, simplified, cases, might, elements, would, final, optimized, suggests, pass, wrap, call, doc, see, did, bug, soon, fixed, uses, unicode, characters, notes, node, out, run, magic, eventtarget, textmodel, keybinding, projectiontextmodel, tooltip, rulers, regex, textmatestyler, htmlgrammar, annotations, textstyler, replace, lets, http, planetorion, org, numbering, shown, specify, following, parameters, besides, changing, have, extra, features, illustrate, decided, simple, application, actually, upgrade, written, andrew, niefer, gist, tuesday, started, top, learnt, made, entire, initialization, synchronous, done, strategy, listed, includes, timer, almost, current, except, reason, stays, permanently, interactive, found, detected, checking, cssrules, each, stylesheet, thank, into, somewhat, extreme, ask, probably, pertinent, question, answer, definitely, mihai, readystate, adding, fixes, safari, chrome, fire, navigating, back, calling, navigation, history, send, addchild, works, browsers, limitations, happens, connected, similar, ancestor, hidden, browser, choose, apply, styling, solves, means, downloaded, parallel, relatives, inside, where, things, ugly, number, being, accessed, solve, initial, wait, instead, order, download, synchronously, other, uris, relative, base, during, deployment, friday, unknown, quick, let, everyone, know, future, appear, has, evolved, greatly, entries, site, presented, should, considered, stale, wiki, monday,

Text of the page (random words):
the orion editor the orion editor monday march 18 2013 orion editor blog now on planet orion just a quick note to let everyone know that all future orion editor blog posts will appear on planet orion as the editor has evolved greatly since the the last blog entries on this site the info presented here should be considered stale for more info on the editor and orion take a look at the orion wiki page posted by unknown at 7 47 am 0 comments email this blogthis share to x share to facebook share to pinterest friday january 6 2012 how to load content in your iframe when we started the textview we used an iframe as the top most element over the time we changed the way we load the content of the iframe a few times in this blog i will go over what we learnt in the process in our first version we made the entire initialization of the text view synchronous that was done using this strategy var iframe document createelement iframe parent addchild iframe var framewindow iframe contentwindow var framedocument framewindow document var html doctype html html head for var i 0 i this method works on all browsers but is not without limitations first it is possible that iframe contentwindow is undefined this happens when the parent is not connected to the dom another similar problem is that the parent or an ancestor of it can be hidden in which case the browser can choose to not apply any styling to it the second problem is using style instead of link to include the css files in order to use style we need to download all the files synchronously one after the other another problem using style is that all the uris in the css are relative to the page base uri which causes problems during deployment the solution for these problems is to wait for the load event of the iframe to write the html and to use link to include the css files var iframe document createelement iframe var iframeloaded false iframe addeventlistener load function if iframeloaded return iframeloaded true var framewindow iframe contentwindow var framedocument framewindow document var html doctype html html head for var i 0 i this code is step forward it solves the problem when iframe contentwindow is undefined using link also means that all files are downloaded in parallel and there is no problems with relatives uri inside the css the main problem with the code above is that the css are not loaded at the time body is being accessed the solve this problem our initial solution was to use the load event for the framewindow var iframe document createelement iframe var iframeloaded false iframe addeventlistener load function if iframeloaded return iframeloaded true var framewindow iframe contentwindow var framedocument framewindow document var html doctype html html head for var i 0 i here is where things get ugly there are number of problems firefox does not send any load events when document write is called from the iframe load handler calling document write not from the iframe load handler causes firefox to change the navigation history chrome some times does not fire load events for the iframe window when navigating back or forward safari sends the load event for the iframe before the css is loaded webkit sends the load event for the iframe before the css is loaded adding a script element after the last link element fixes it for webkit to workaround the problems listed above the next version includes a timer var iframe document createelement iframe var iframeloaded false iframe addeventlistener load function if iframeloaded return iframeloaded true var framewindow iframe contentwindow var framedocument framewindow document var html doctype html html head for var i 0 i the version above is almost our current solution except that it does not work on firefox for some reason on firefox the framedocument readystate stays permanently set to interactive when document write is called from the iframe load handler the only way we found to detected that all css are loaded was checking the cssrules of each stylesheet thank you mihai var iframe document createelement iframe var iframeloaded false iframe addeventlistener load function if iframeloaded return iframeloaded true var framewindow iframe contentwindow var framedocument framewindow document var html doctype html html head for var i 0 i this is all the code that was needed to load the content into the iframe somewhat extreme if you d ask me probably the most pertinent question is why we are using an iframe the answer to that is definitely another post posted by felipe heidrich at 10 07 am 3 comments email this blogthis share to x share to facebook share to pinterest 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 posted by felipe heidrich at 12 56 pm 5 comments email this blogthis share to x share to facebook share to pinterest older posts home subscribe to posts atom blog archive 2013 1 march 1 orion editor blog now on planet orion 2012 2 january 2 2011 2 august 1 january 1 followers awesome inc theme powered by blogger