Extension - Editor
Descriptors
To contribute a new Editor (text-based or form-based) to the Web IDE you need to create one model (*.extension
) and one descriptor (in *.js
) files in your project:
my-editor.extension
{
"module": "my-project/services/my-editor.js",
"extensionPoint": "ide-editor",
"description": "The description of my editor"
}
module
points to the corresponding view descriptor (see below)extensionPoint
is the name of the built-in extension point to which the current plugin will contribute
my-editor.js
exports.getView = function() {
var view = {
name: "My Editor",
factory: "frame",
region: "center-top",
link: "../my-project/index.html",
contentTypes: [ "application/json" ]
};
return view;
};
name
is the exact name of the view, which will be shown in the e.g. menufactory
the type of the factory used during instantiating the viewregion
the region where the view will be placed initiallylink
is the location within the same or external project pointing to the entry HTML file which will be rendered as a viewcontentTypes
the content types array of supported files
The project structure in this case should look like this:
| my-project
|---- extensions
|----> my-editor.extension
|---- services
|----> my-editor.js
|---- index.html
|---- js
|---- css
|---- ...
Note: The names of the
extensions
andservices
can be different following the layout of your project
Implementation
<!DOCTYPE html>
<html lang="en" ng-app="editor">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" href="../../../../../services/v4/js/theme/resources.js/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../../../../../services/v4/web/resources/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="image/png" rel="shortcut icon" href="../../../../../services/v4/web/resources/images/favicon.png" />
<!-- Custom IDE Styles -->
<link type="text/css" rel="stylesheet" href="../../../../../services/v4/js/theme/resources.js/ide.css" />
</head>
<body ng-controller="EditorController">
<div class="container">
<div class="page-header">
<h1>My Editor Description: {{file}}</h1>
</div>
<form>
<div class="form-group">
<label>Group</label>
<input type="text" class="form-control" ng-model="myModel.group" value="">
</div>
...
<button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</form>
</div>
<script type="text/javascript" src="../../../../../services/v4/web/resources/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="../../../../../services/v4/web/resources/bootstrap/3.3.7/bootstrap.min.js" async></script>
<script type="text/javascript" src="../../../../../services/v4/web/resources/angular/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="../../../../../services/v4/web/resources/angular/1.4.7/angular-resource.min.js"></script>
<script src="../../../../../services/v4/web/ide-core/ui/message-hub.js"></script>
<script type="text/javascript" src="editor.js"></script>
</body>
</html>