Fix saving of inline data (properly retrieve protected tags like 'script'), upgrade CKEditor and refactor main.js

Author: toastercup

Diff for: bower.json

@@ -1,6 +1,6 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "ignore": [
     "**/.*",
     "node_modules",

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

@@ -2,17 +2,22 @@
   '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;
+    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://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.CKEDITOR.config.allowedContent = true;
       global.CKEDITOR.config.extraPlugins = 'media-selector,sourcedialog';
       global.CKEDITOR.config.removePlugins = 'image,sourcearea';
 

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);
@@ -16,7 +16,8 @@
     });
 
     this.contentChanged = function(event) {
-      RiotControl.trigger(constants.ACTIONS.SNIPPET_CHANGED, {name: opts.id, body: event.target.innerHTML});
+      var body = CKEDITOR.instances[event.target.id].getData();
+      RiotControl.trigger(constants.ACTIONS.SNIPPET_CHANGED, {name: opts.id, body: body});
     }
   </script>