{"_id":"54e2255622de1c230094b158","parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","__v":9,"category":{"_id":"54e21e2b22de1c230094b147","pages":[],"__v":0,"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-16T16:43:23.915Z","from_sync":false,"order":9,"slug":"ace-text-editor","title":"Ace (text editor)"},"version":{"_id":"54d5635532d98b0d00384afb","project":"54d53c7b23010a0d001aca0c","__v":10,"forked_from":"54d53c7c23010a0d001aca0f","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-16T17:13:58.534Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"A code formatter plugin adds support for a new language or formatting scheme. A menu item is added to the `Edit / Code Formatting` menu and the key binding will trigger your plugin.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/RLvY2S6QBywvGidpXxtm_Screen%20Shot%202015-03-12%20at%202.59.14%20PM.png\",\n        \"Screen Shot 2015-03-12 at 2.59.14 PM.png\",\n        \"834\",\n        \"1057\",\n        \"#426989\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Adding the Menu Item\n\nIn the `load` event of your plugin call `addFormatter()` to add the menu item to the Edit menu.\n\n```\nformat.addFormatter(\"Javascript (JS Beautify)\", \"javascript\", plugin);\n```\n\n# Responding to a Format Request\n\nListen to the `format` event on the format plugin. This event is called for each format request. Your plugin can decide whether to respond to the event or not. Make sure to return `true` after executing the formatting.\n\n```\nformat.on(\"format\", function(e) {\n    if (e.mode == \"javascript\")\n        return formatCode(e.editor, e.mode);\n});\n```\n\n# Format Ace's Selection\n\nThe format function gets a reference to the editor object and the mode. The following example retrieves the value of the selection, replaces the value and selects the new content again.\n\n```\nfunction formatCode(editor, mode) {\n    var ace = editor.ace;\n    var sel = ace.selection;\n    var session = ace.session;\n    var range = sel.getRange();\n\n    var value = session.getTextRange(range);\n    \n    value = doFormatting(value);\n    \n    var end = session.diffAndReplace(range, value);\n    sel.setSelectionRange(Range.fromPoints(range.start, end));\n    \n    return true;\n}\n```\n\n# Full Example\n\nSee the [jsbeautify implementation](https://github.com/c9/c9.ide.format/blob/master/formatters/jsbeautify.js) for a full example.","excerpt":"","slug":"code-formatter","type":"basic","title":"Code Formatter"}
A code formatter plugin adds support for a new language or formatting scheme. A menu item is added to the `Edit / Code Formatting` menu and the key binding will trigger your plugin. [block:image] { "images": [ { "image": [ "https://files.readme.io/RLvY2S6QBywvGidpXxtm_Screen%20Shot%202015-03-12%20at%202.59.14%20PM.png", "Screen Shot 2015-03-12 at 2.59.14 PM.png", "834", "1057", "#426989", "" ] } ] } [/block] # Adding the Menu Item In the `load` event of your plugin call `addFormatter()` to add the menu item to the Edit menu. ``` format.addFormatter("Javascript (JS Beautify)", "javascript", plugin); ``` # Responding to a Format Request Listen to the `format` event on the format plugin. This event is called for each format request. Your plugin can decide whether to respond to the event or not. Make sure to return `true` after executing the formatting. ``` format.on("format", function(e) { if (e.mode == "javascript") return formatCode(e.editor, e.mode); }); ``` # Format Ace's Selection The format function gets a reference to the editor object and the mode. The following example retrieves the value of the selection, replaces the value and selects the new content again. ``` function formatCode(editor, mode) { var ace = editor.ace; var sel = ace.selection; var session = ace.session; var range = sel.getRange(); var value = session.getTextRange(range); value = doFormatting(value); var end = session.diffAndReplace(range, value); sel.setSelectionRange(Range.fromPoints(range.start, end)); return true; } ``` # Full Example See the [jsbeautify implementation](https://github.com/c9/c9.ide.format/blob/master/formatters/jsbeautify.js) for a full example.