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
This page is still under construction. More information will come soon!
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>