{"__v":21,"_id":"54dec5c0c2b4b70d009c3f05","category":{"__v":0,"_id":"54e68e62a43fe13500db3879","pages":[],"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-20T01:31:13.999Z","from_sync":false,"order":5,"slug":"editor-plugins","title":"Editor Plugins"},"parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"__v":10,"_id":"54d5635532d98b0d00384afb","forked_from":"54d53c7c23010a0d001aca0f","project":"54d53c7b23010a0d001aca0c","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-14T03:49:20.092Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Panes are the elements that house tabs. The main UI of Cloud9 starts with a single pane and users can divide the UI into multiple panes in arbitrary configurations. There is always at least one pane. Panes and tabs are controlled by the `tabManager` plugin, which offers an API to control the tabs and panes in Cloud9.\n\n# Object structure\n\nBesides tabs and panes there are several other objects involved in displaying content and making it editable. The following hierarchy describes the relationships between those objects.\n\n- [Pane](https://docs.c9.io/api/#!/api/Pane) - Represent a single pane, housing multiple tabs\n  - [Editor](https://docs.c9.io/api/#!/api/Editor) - The editor responsible for displaying the document in the tab\n  - [Tab](https://docs.c9.io/api/#!/api/Tab) - A single tab (button) in a pane\n    - [Document](https://docs.c9.io/api/#!/api/Document) - The representation of a file in the tab\n      - [Session](https://docs.c9.io/api/#!/api/Session) - The session information of the editor\n      - [UndoManager](https://docs.c9.io/api/#!/api/UndoManager) - The object that manages the undo stack for this document\n\nIt is important to note that the `Editor` plugin(s) are related to the pane, not the tab. There's only one instance of a certain editor for each pane. The editor is responsible for displaying the content of a document based on the tab that is active. There can be a maximum of one tab active per pane.\n\n# Retrieving Panes\n\nThe `tabManager` plugin is responsible for all the `Tab` and `Pane` objects in Cloud9. Fetch a list of all the panes like this.\n\n```javascript\nvar panes = tabManager.getPanes();\n```\n\nYou can also find a specific pane by it's given name.\n\n```javascript\nvar name = pane.name; // For easily storing a reference to the pane across sessions\n\nvar pane = tabManager.findPane(name);\n```\n\n# Splitting Panes\n\nThe most common way to create a new `Pane` instance is by splitting a current pane, either horizontally or vertically.\n\nSplit a pane horizontally.\n```javascript\nvar pane = tabManager.getPanes()[0];\n\n// Split horizontally and create new pane on the left\nvar newPane = pane.hsplit();\n\n// Split horizontally and create new pane on the right\nvar newPane = pane.hsplit(true);\n```\n\nSplit a pane vertically.\n```javascript\nvar pane = tabManager.getPanes()[0];\n\n// Split vertically and create new pane on the top\nvar newPane = pane.vsplit();\n\n// Split vertically and create new pane on the bottom\nvar newPane = pane.vsplit(true);\n```\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/lr5CzCLSSGRngm7n8Xfa_2015-02-18_1851.png\",\n        \"2015-02-18_1851.png\",\n        \"1570\",\n        \"940\",\n        \"#9e4a88\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Tabs and Panes\n\nTo move a Tab instance to a specific pane, use the `attachTo` method.\n\n```javascript\ntab.attachTo(pane);\n```\n\nYou can also move a tab around the panes using `moveTabToSplit`. This function will create new intermediate panes in between steps.\n\n```javascript\npane.moveTabToSplit(tab, \"left\"); // or \"right\", \"up\", \"down\"\n```\n\nRetrieve all the tab objects in a pane like this.\n```javascript\nvar tabs = pane.getTabs();\n```\n\nTo get all the active tabs in Cloud9 look over all the panes and get their active tab.\n```javascript\nvar activeTabs = [];\ntabManager.getPanes().forEach(function(pane){\n    if (pane.activeTab)\n        activeTabs.push(pane.activeTab);\n});\n```","excerpt":"","slug":"panes","type":"basic","title":"Panes"}
Panes are the elements that house tabs. The main UI of Cloud9 starts with a single pane and users can divide the UI into multiple panes in arbitrary configurations. There is always at least one pane. Panes and tabs are controlled by the `tabManager` plugin, which offers an API to control the tabs and panes in Cloud9. # Object structure Besides tabs and panes there are several other objects involved in displaying content and making it editable. The following hierarchy describes the relationships between those objects. - [Pane](https://docs.c9.io/api/#!/api/Pane) - Represent a single pane, housing multiple tabs - [Editor](https://docs.c9.io/api/#!/api/Editor) - The editor responsible for displaying the document in the tab - [Tab](https://docs.c9.io/api/#!/api/Tab) - A single tab (button) in a pane - [Document](https://docs.c9.io/api/#!/api/Document) - The representation of a file in the tab - [Session](https://docs.c9.io/api/#!/api/Session) - The session information of the editor - [UndoManager](https://docs.c9.io/api/#!/api/UndoManager) - The object that manages the undo stack for this document It is important to note that the `Editor` plugin(s) are related to the pane, not the tab. There's only one instance of a certain editor for each pane. The editor is responsible for displaying the content of a document based on the tab that is active. There can be a maximum of one tab active per pane. # Retrieving Panes The `tabManager` plugin is responsible for all the `Tab` and `Pane` objects in Cloud9. Fetch a list of all the panes like this. ```javascript var panes = tabManager.getPanes(); ``` You can also find a specific pane by it's given name. ```javascript var name = pane.name; // For easily storing a reference to the pane across sessions var pane = tabManager.findPane(name); ``` # Splitting Panes The most common way to create a new `Pane` instance is by splitting a current pane, either horizontally or vertically. Split a pane horizontally. ```javascript var pane = tabManager.getPanes()[0]; // Split horizontally and create new pane on the left var newPane = pane.hsplit(); // Split horizontally and create new pane on the right var newPane = pane.hsplit(true); ``` Split a pane vertically. ```javascript var pane = tabManager.getPanes()[0]; // Split vertically and create new pane on the top var newPane = pane.vsplit(); // Split vertically and create new pane on the bottom var newPane = pane.vsplit(true); ``` [block:image] { "images": [ { "image": [ "https://files.readme.io/lr5CzCLSSGRngm7n8Xfa_2015-02-18_1851.png", "2015-02-18_1851.png", "1570", "940", "#9e4a88", "" ] } ] } [/block] # Tabs and Panes To move a Tab instance to a specific pane, use the `attachTo` method. ```javascript tab.attachTo(pane); ``` You can also move a tab around the panes using `moveTabToSplit`. This function will create new intermediate panes in between steps. ```javascript pane.moveTabToSplit(tab, "left"); // or "right", "up", "down" ``` Retrieve all the tab objects in a pane like this. ```javascript var tabs = pane.getTabs(); ``` To get all the active tabs in Cloud9 look over all the panes and get their active tab. ```javascript var activeTabs = []; tabManager.getPanes().forEach(function(pane){ if (pane.activeTab) activeTabs.push(pane.activeTab); }); ```