Please see the WIKI for further information, including links to relevant Youtube Videos and specific pages about development process and such.
The CodeEditor is built upon CodeMirror and
FancyTree. and provides a
reusable way to define the different multi-line attributes for each of
the meta-types in your WebGME domain, as well as what syntax
highlighting and other properties those attributes should support,
- Syntax highlighting for all languages (modes) supported by CodeMirror
- Some code completion options depending on language
- Keybinding support for
sublime text, and
emacsstyle keybindings, saved per user + per project
- Editor theme-ing, saved per user + per project
- Code Folding (depending on the text grouping in the mode
- A tree browser for easily navigating between different attributes across different nodes of your WebGME project.
- A diff view showing the changes you've made that are not committed.
- Collaborative simultaneous editing showing where each person is in the attribute, what they've highlighted, etc.
- Total revert capability or reverting of individual line changes
- User configuration of line-wrapping
- Full-screen distraction free editing mode (press
F11when the text editor has focus)
- Full interoperability with WebGME's split-panel view.
mode documentation, see
Adding the CodeEditor as a WebGME Component to your Project
Install instructions are below, after which you simply have to enable
CodeEditor Visualizer as a valid visualizer in the META of the nodes
you wish it to be active on.
Installing With WebGME-CLI
To add the CodeEditor to your WebGME deployment, simply use the
webgme-cli to install it:
webgme import viz CodeEditor webgme-codeeditor
Which will install the CodeEditor and then use
bower to install the
CodeMirror and other dependencies.
Installing With NPM
You can also use npm to install it by running:
npm install --save webgme-codeeditor
You will need to inform webgme where to load the CodeEditor from, by editing
config/config.webgme.js to have:
added to your
You will also need to tell WebGME that it is a visualizer, by adding it your 'src/visualizers/Visualizers.json`:
Finally you will need to add it to your
Configuring the CodeEditor for your Project / Domain
After you've added the CodeEditor to your project, you can configure it just like any other WebGME component. Some example options are provided below.
When the CodeEditor is active on a WebGME node, it loads the node and
its children, up to a depth of
simultaneously looking upwards for a root node of meta-type
config.RootType. Any nodes it loads whose type matches any of the
config.excludeTypes will be discarded, along with their
children. If you configure the
config.loadDepth to be
CodeEditor visualizer will load the full subtree.
This configuration can be found in components.json.
Running the example in this repository
First, install the webgme-codeeditor following:
Second, start mongodb locally by running the
mongod executable in
your mongodb installation (you may need to create a
npm start from the project root to start . Finally,
http://localhost:9000 to start using webgme-codeeditor!
The seed project test can be used as the base of a project to show how the CodeEditor works.