Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Orion/How Tos/Code Edit"
(Created page with "= Code Edit Widget With Language Tooling = * In order for users to consume the Orion editor with language tooling fully loaded, a new widget called "Code Edit" have been int...") |
|||
Line 1: | Line 1: | ||
+ | {{warning|This page is still under construction. More information will come soon!}} | ||
+ | |||
= Code Edit Widget With Language Tooling = | = Code Edit Widget With Language Tooling = | ||
Revision as of 14:40, 5 June 2015
Contents
Code Edit Widget With Language Tooling
- In order for users to consume the Orion editor with language tooling fully loaded, a new widget called "Code Edit" have been introduced.
- The build is available both minified and non-minified.
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.
Nightly builds & Releases
- 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
You can simply download the zip file and unzip it into a folder on your web server. The code example shows how your html file will look, to consume the widget.
<!doctype html> <html> <head> <title>Embed code edit widget</title> <link rel="stylesheet" type="text/css" href="../build/code_edit/built-codeEdit.css"/> <link rel="stylesheet" type="text/css" href="demo.css"/> <script src="../build/code_edit/built-codeEdit.js"></script> <script> window.onload=function(){ var codeEdit = new orion.codeEdit(); var contents = 'var foo = "bar";\n' var contents1 = "<span>foo2</span>"; codeEdit.create({parent: "embeddedEditor"}).then(function(editorViewer) { document.getElementById("progressMessageDiv").textContent = "Plugins loaded!"; editorViewer.setContents(contents, "application/javascript"); }); codeEdit.create({parent: "embeddedEditor1", contentType: "text/html", contents: contents1}); }; </script> </head> <body id="orion-browser" spellcheck="false" class="orionPage"> <div class="embeddedEditorDemoTextParent"> <span id = "progressMessageDiv" style="color: green">Loading language tooling plugins...</span> </div> </div> <div class="embeddedEditorParentOuter" id="embeddedEditor"> </div> <div class="embeddedEditorParentOuter" id="embeddedEditor1"> </div> </body> </html>