Browse Source

W1.8: HTML editor with preview.

Frederic G. MARAND 8 years ago
parent
commit
71efbc06b9
2 changed files with 21 additions and 2 deletions
  1. 13 2
      textcircle.html
  2. 8 0
      textcircle.js

+ 13 - 2
textcircle.html

@@ -10,11 +10,22 @@
   </nav><!-- /nav -->
 
   <div class="container top-margin">
-    {{> editor}}
+    <div class="row">
+      <div class="col-md-6">
+        {{> editor}}
+      </div>
+      <div class="col-md-6">
+        {{> viewer }}
+      </div>
+    </div>
   </div>
 </body>
 
 <template name="editor">
 <h2>doc id: {{ docid }}</h2>
-  {{> sharejsCM docid=docid id="editor" }}
+  {{> sharejsCM docid=docid id="editor" onRender=config }}
+</template>
+
+<template name="viewer">
+  <iframe id="viewer_iframe"></iframe>
 </template>

+ 8 - 0
textcircle.js

@@ -6,6 +6,14 @@ if (Meteor.isClient) {
     docid: function () {
       let doc = Documents.findOne();
       return doc ? doc._id : undefined;
+    },
+    config: function () {
+      return function (editor) {
+        editor.on("change", function (cm_editor, info) {
+          let $preview = $("#viewer_iframe");
+          $preview.contents().find("html").html(cm_editor.getValue());
+        });
+      };
     }
   });