adding loadModel and model option

bustle · Oct 2, 2014 · c02edbe · c02edbe
1 parent 89e7be1
commit c02edbe
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -34,7 +34,7 @@ <h3>Tips &amp; Tricks:</h3>
         <li>Make the toolbar sticky by pressing <b>F5</b></li>
         <li>Double click a word to select it</li>
         <li>You only have to select a portion of a paragraph if you want to change it to a heading, subheading, or quote</li>
-        <li>To create a soft line break, press <b>shift</b> + <b>enter</b></li>
+        <li>To create a soft line break, press <b><i>shift</i></b> + <b>enter</b></li>
         <li>Press <b>enter</b> twice to exit a list</li>
       </ul>
 
@@ -70,8 +70,10 @@ <h3>Keyboard shortcuts:</h3>
   <!-- Include ContentKit JS -->
   <script src="../dist/content-kit-editor.js"></script>
 
-  <!-- Initialize a new Editor -->
-  <script>var editor = new ContentKit.Editor('.editor');</script>
+  <script>
+    // Initialize a new Editor
+    var editor = new ContentKit.Editor('.editor');
+  </script>
 
   <!-- JS just for the demo page -->
   <script src="demo.js"></script>

diff --git a/src/css/embeds.less b/src/css/embeds.less
@@ -85,16 +85,17 @@
 .ck-embed figcaption {
   color: #999;
   font-size: 0.7em;
-  line-height: 1.3em;
+  line-height: 1.35em;
   font-style: italic;
   margin: 10px 0;
 }
 .ck-embed figcaption a {
   color: #999;
-  text-decoration: underline;
+  text-decoration: none;
 }
 .ck-embed figcaption a:hover {
   color: #666;
+  text-decoration: underline;
 }
 
 @media screen and (min-width: 1080px) {

diff --git a/src/js/content-kit-editor/editor/editor-html-renderer.js b/src/js/content-kit-editor/editor/editor-html-renderer.js
@@ -10,7 +10,7 @@ function embedRenderer(model) {
   return '<div class="ck-embed" data-embed=1 contenteditable="false">' +
             '<figure>' +
               (isVideo ? '<div class="ck-video-container">' : '') + this.render(model) + (isVideo ? '</div>' : '') +
-              '<figcaption>' + embedAttrs.provider_name + ': ' +
+              '<figcaption>' +
                 '<a target="_blank" href="' + embedAttrs.url + '">' + embedAttrs.title + '</a>' +
               '</figcaption>' +
             '</figure>' +

diff --git a/src/js/content-kit-editor/editor/editor.js b/src/js/content-kit-editor/editor/editor.js
@@ -26,6 +26,7 @@ var defaults = {
   placeholder: 'Write here...',
   spellcheck: true,
   autofocus: true,
+  model: null,
   stickyToolbar: !!('ontouchstart' in window),
   textFormatCommands: [
     new BoldCommand(),
@@ -154,7 +155,11 @@ function Editor(element, options) {
     element.setAttribute('contentEditable', true);
     editor.element = element;
 
-    editor.sync();
+    if (editor.model) {
+      editor.loadModel(editor.model);
+    } else {
+      editor.sync();
+    }
 
     bindContentEditableTypingCorrections(editor);
     bindPasteListener(editor);
@@ -183,6 +188,12 @@ function Editor(element, options) {
 // Add event emitter pub/sub functionality
 merge(Editor.prototype, EventEmitter);
 
+Editor.prototype.loadModel = function(model) {
+  this.model = model;
+  this.syncVisual();
+  this.trigger('update');
+};
+
 Editor.prototype.sync = function() {
   this.syncModel();
   this.syncVisual();
@@ -191,7 +202,6 @@ Editor.prototype.sync = function() {
 Editor.prototype.syncModel = function() {
   this.model = this.compiler.parse(this.element.innerHTML);
   this.trigger('update');
-  return this;
 };
 
 Editor.prototype.syncModelAt = function(index) {