example showing that only one editor mode works at a time

Radico · Apr 22, 2013 · 867481f · 867481f
1 parent 526820d
commit 867481f
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 17 deletions.
diff --git a/example/build.js b/example/build.js
@@ -3,6 +3,8 @@ var browserify =  require('browserify')
   , fs         =  require('fs');
 
 browserify()
-  .require(require.resolve('./main'), { entry: true })
+  .require(require.resolve('./javascript-editor'), { entry: true })
+//  .require(require.resolve('./coffee-editor'), { entry: true })
+//  .require(require.resolve('./css-editor'), { entry: true })
   .bundle({ debug: true })
   .pipe(fs.createWriteStream(__dirname + '/bundle.js'));
diff --git a/example/coffee-editor.js b/example/coffee-editor.js
@@ -0,0 +1,10 @@
+// initialize ace editor customized for coffee
+var ace = require('brace/coffee');
+
+// initialize coffee mode and monokai theme after editor itself
+require('brace/mode/coffee');
+require('brace/theme/monokai');
+
+var editor = ace.edit('coffee-editor');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/coffee');
diff --git a/example/css-editor.js b/example/css-editor.js
@@ -0,0 +1,10 @@
+// initialize ace editor customized for css
+var ace = require('brace/css');
+
+// initialize css mode and monokai theme after editor itself
+require('brace/mode/css');
+require('brace/theme/monokai');
+
+var editor = ace.edit('css-editor');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/css');
diff --git a/example/index.css b/example/index.css
@@ -1,10 +1,23 @@
-#editor { 
+div.editor { 
   position: absolute;
-  top: 49px;
-  right: 0;
-  bottom: 0;
+  width: 50%;
+  height: 50%;
+  background: black;
+}
+
+#javascript-editor {
   left: 0;
-  width: 100%;
+  top: 0;
+}
+
+#coffee-editor {
+  top: 50%;
+  bottom: 0;
+}
+
+#css-editor {
+  top: 0;
+  left: 50%;
 }
 
 h1 {

diff --git a/example/index.html b/example/index.html
@@ -7,8 +7,11 @@
 </head>
 
 <body>
-  <h1>JavaScript Ace Editor provided by brace</h1>
-  <div id="editor"></div>
+  <h1>Ace Editors provided by brace</h1>
+  <div id="javascript-editor" class="editor"></div>
+  <div id="coffee-editor" class="editor"></div>
+  <div id="css-editor" class="editor"></div>
+  <!--<div id="lua-editor" class="editor"></div>-->
   <script type="text/javascript" src="./bundle.js"></script>
 </body>
 </html>
diff --git a/example/javascript-editor.js b/example/javascript-editor.js
@@ -0,0 +1,10 @@
+// initialize ace editor customized for javascript
+var ace = require('brace/javascript');
+
+// initialize javascript mode and monokai theme after editor itself
+require('brace/mode/javascript');
+require('brace/theme/monokai');
+
+var editor = ace.edit('javascript-editor');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/javascript');
diff --git a/example/main.js b/example/main.js
@@ -1,12 +1,3 @@
 'use strict';
 
-// initialize ace editor customized for javascript
-var ace = require('brace/javascript');
 
-// initialize javascript mode and monokai theme after editor itself
-require('brace/mode/javascript');
-require('brace/theme/monokai');
-
-var editor = ace.edit("editor");
-editor.setTheme("ace/theme/monokai");
-editor.getSession().setMode("ace/mode/javascript");