Ace n'aime pas qu'on remplace son contenu...

css/styles.css

@@ -55,7 +55,7 @@ button.active {
  * Styles pour l'éditeur Ace
  */
 #editor {
-  font-size: 90%;
+  /*font-size: 90%;*/
   position: absolute;
   top: 110px;
   right: 0;

js/editor.js

@@ -5,13 +5,18 @@ $(document).ready(function() {
   var $htmlContent = $('#html-content');
   var activeTab = 'show-html';
 
-  var editor = ace.edit("editor");
-  editor.setTheme("ace/theme/eclipse");
-  editor.getSession().setMode("ace/mode/javascript");
-  editor.getSession().setUseWrapMode(true);
-  editor.getSession().on('change', function() {
-    console.log(arguments)
-  });
+  var editor;
+
+  function initEditor(mode) {
+    editor = ace.edit("editor");
+    editor.setTheme("ace/theme/eclipse");
+    console.log(mode);
+    editor.getSession().setMode("ace/mode/" + mode);
+    editor.getSession().setUseWrapMode(true);
+  }
+  // editor.getSession().on('change', function() {
+  //   console.log(arguments)
+  // });
 
   function setActiveTab(which) {
     var elementId = 'show-' + which;
@@ -19,11 +24,17 @@ $(document).ready(function() {
     activeTab = elementId;
     $('#' + elementId).addClass('active');
     var ed = $('#editor-' + which);
-    editor.getSession().setValue('');
-    console.log(which);
-    editor.getSession().setMode("ace/mode/" + which);
-    console.log('set editor content to', ed.html());
-    editor.getSession().setValue(ed.html());
+    // editor.getSession().setValue('');
+    console.log(which, "ace/mode/" + which);
+    // editor.getSession().setMode("ace/mode/" + which);
+    // console.log('set editor content to', ed.html());
+    // editor.getSession().setValue(ed.html());
+    // newSession = ace.createEditSession(ed.html(), "ace/mode/" + which)
+    // var oldSession = editor.session
+    // editor.setSession(newSession)
+    initEditor(which);
+    console.log(ed[0].innerHTML)
+    editor.getSession().setValue('<button id="pouet">Click me</button>'); //ed[0].innerHTML);
   }
 
   $('#tabs button').click(function() {