Merge pull request #4 from cortex-cms/inline-data-fixes-and-ckeditor-upgrade-and-refactor

Inline Data Fixes + CKEditor Upgrade + Refactor

Author: Alex Tharp

Diff for: bower.json

@@ -1,17 +1,17 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "ignore": [
     "**/.*",
     "node_modules",
     "components"
   ],
   "dependencies": {
-    "riot": "~2.3.18",
+    "riot": "~3.0.7",
     "q": "~1.3.0",
     "qajax": "[email protected]:cb-talent-development/qajax#master",
     "underscore": "~1.8.3",
-    "materialize": "~0.97.6",
+    "materialize": "~0.97.8",
     "normalize-scss": "~3.0"
   },
   "resolutions": {

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A tool to enable in-page editing of elements with Cortex as a backend",
   "author": "CB Content Enablement Product Team <[email protected]>",
   "license": "Apache-2.0",

Diff for: src/app/main.js

@@ -1,35 +1,42 @@
-(function(global) {
+(function (global) {
   'use strict';
 
-  $(function() {
-    $('body').prepend( $('<toolbar></toolbar>') );
-    $('body').append( $('<media-library></media-library>') );
-    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100') );
-    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/icon?family=Material+Icons') );
-    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', config.CONTENT_SNIPPETS_EDIT_CSS_URL) );
-    $.getScript('https://cdn.ckeditor.com/4.5.10/standard/ckeditor.js', function() {
-      global.CKEDITOR.config.autoParagraph = false;
-      global.CKEDITOR.config.allowedContent = true;
-      global.CKEDITOR.plugins.addExternal( 'media-selector', global.config.CKEDITOR_PLUGINS_URL + 'media-selector/', 'plugin.js' );
-      global.CKEDITOR.plugins.addExternal( 'sourcedialog', global.config.CKEDITOR_PLUGINS_URL + 'sourcedialog/', 'plugin.js' );
-      global.CKEDITOR.plugins.addExternal( 'codemirror', global.config.CKEDITOR_PLUGINS_URL + 'codemirror/', 'plugin.js' );
-      global.CKEDITOR.config.extraPlugins = 'media-selector,sourcedialog';
-      global.CKEDITOR.config.removePlugins = 'image,sourcearea';
-
-      var stores = {
-        WebpageStore: new WebpageStore(),
-        MediasStore: new MediasStore()
-      };
-
-      _.each(stores, function(store) {
-        RiotControl.addStore(store);
-      });
+  $(function () {
+    var body = $('body'),
+      head = $('head');
+
+    body.prepend($('<toolbar></toolbar>'));
+    body.append($('<media-library></media-library>'));
+
+    head.append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100'));
+    head.append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/icon?family=Material+Icons'));
+    head.append($('<link rel="stylesheet" type="text/css" />').attr('href', config.CONTENT_SNIPPETS_EDIT_CSS_URL));
+
+    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js', function () {
+      $.getScript('https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js', function () {
+        global.CKEDITOR.plugins.addExternal('media-selector', global.config.CKEDITOR_PLUGINS_URL + 'media-selector/', 'plugin.js');
+        global.CKEDITOR.plugins.addExternal('sourcedialog', global.config.CKEDITOR_PLUGINS_URL + 'sourcedialog/', 'plugin.js');
+        global.CKEDITOR.plugins.addExternal('codemirror', global.config.CKEDITOR_PLUGINS_URL + 'codemirror/', 'plugin.js');
 
-      global.stores = stores;
+        global.CKEDITOR.config.allowedContent = true;
+        global.CKEDITOR.config.extraPlugins = 'media-selector,sourcedialog';
+        global.CKEDITOR.config.removePlugins = 'image,sourcearea';
 
-      riot.mount('snippet');
-      riot.mount('media-library');
-      riot.mount('toolbar');
+        var stores = {
+          WebpageStore: new WebpageStore(),
+          MediasStore: new MediasStore()
+        };
+
+        _.each(stores, function (store) {
+          RiotControl.addStore(store);
+        });
+
+        global.stores = stores;
+
+        riot.mount('snippet');
+        riot.mount('media-library');
+        riot.mount('toolbar');
+      });
     });
   });
 }(this));

Diff for: src/app/tags/snippet.tag

@@ -1,5 +1,5 @@
 <snippet>
-  <div class="editor" onblur="{ contentChanged }" contenteditable="true"><yield /></div>
+  <div id="{ opts.id }" class="editor" onblur="{ contentChanged }" contenteditable="true"><yield /></div>
 
   <script>
     fluxableTag(this, RiotControl);
@@ -10,13 +10,13 @@
         return obj.document.name == opts.id;
       });
       if (typeof foundSnippet != "undefined") {
-        self.getElementsByClassName('editor')[0].innerHTML = foundSnippet.document.body;
-        self.update();
+        CKEDITOR.instances[opts.id].setData(foundSnippet.document.body);
       }
     });
 
     this.contentChanged = function(event) {
-      RiotControl.trigger(constants.ACTIONS.SNIPPET_CHANGED, {name: opts.id, body: event.target.innerHTML});
+      var body = CKEDITOR.instances[opts.id].getData();
+      RiotControl.trigger(constants.ACTIONS.SNIPPET_CHANGED, {name: opts.id, body: body});
     }
   </script>