W1.8: HTML editor with preview.

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>

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());
+        });
+      };
     }
   });