Got Aloha editor working as a pattern.

Next steps are to provide arguments with which it can be configured as well as a extensive demo page. refs: ploneintranet/ploneintranet.theme#93
Patternslib · Mar 3, 2015 · 7338704 · 7338704
1 parent 68dcc3b
commit 7338704
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
 src/bower_components
+stamp-bower
+stamp-npm
diff --git a/bower.json b/bower.json
@@ -19,6 +19,11 @@
   ],
   "dependencies": {
     "aloha-editor": "~1.1.0",
+    "mockup-core": "~2.1.3",
+    "patternslib": "master"
+  },
+  "resolutions": {
+    "jquery": "1.11.1",
     "patternslib": "master"
   }
 }
diff --git a/index.html b/index.html
@@ -3,15 +3,18 @@
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <title>Aloha Editor Pattern demo</title>
-    <link rel="stylesheet" href="src/bower_components/aloha-editor/src/demo-app/app/css/bootstrap.css" />
-    <link rel="stylesheet" href="src/bower_components/aloha-editor/src/demo-app/app/css/aloha-editor-demo.css" />
-    <script data-main="../main" src="../src/bower_components/requirejs/require.js"></script>
+    <link rel="stylesheet" href="src/bower_components/aloha-editor/src/demo/demo-app/app/css/bootstrap.css" />
+    <link rel="stylesheet" href="src/bower_components/aloha-editor/src/demo/demo-app/app/css/aloha-editor-demo.css" />
+    <link rel="stylesheet" href="src/bower_components/aloha-editor/src/css/aloha.css" />
+    <script data-main="main" src="src/bower_components/requirejs/require.js"></script>
 </head>
 <body>
     <div id="container">
         <div>
             <div class="item">
-                <h1>Masonry Pattern demo</h1>
+                <h1>Aloha Pattern demo</h1>
+
+                <textarea name="textarea" id="textarea" rows="10" class="xxlarge pat-editor"></textarea>
             </div>
         </div>
     </div>

diff --git a/main.js b/main.js
@@ -3,6 +3,7 @@ require.config({
     paths: {
         "aloha-editor":                 "bower_components/aloha-editor/",
         "jquery":                       "bower_components/jquery/dist/jquery",
+        "jquery.browser":               "bower_components/jquery.browser/dist/jquery.browser",
         "logging":                      "bower_components/logging/src/logging",
         "mockup-parser":                "bower_components/mockup-core/js/parser",
         "mockup-patterns-base":         "bower_components/mockup-core/js/pattern",
@@ -175,7 +176,7 @@ require.config({
 		"listenforcer/res":             "bower_components/aloha-editor/src/plugins/extra/listenforcer/res",
 
         // Aloha Plugins
-        "ui-plugin":                    "bower_components/aloha-editor/src/lib/aloha/ui/ui-plugin",
+        "ui/ui-plugin":                 "bower_components/aloha-editor/src/plugins/common/ui/lib/ui-plugin",
         "link-plugin":                  "bower_components/aloha-editor/src/lib/aloha/link/link-plugin",
         "table-plugin":                 "bower_components/aloha-editor/src/lib/aloha/table/table-plugin",
         "format-plugin":                "bower_components/aloha-editor/src/lib/aloha/format/format-plugin",
@@ -194,7 +195,10 @@ require.config({
         "paste-plugin":                 "bower_components/aloha-editor/src/lib/aloha/paste/paste-plugin",
         "autoparagraph-plugin":         "bower_components/aloha-editor/src/lib/aloha/autoparagraph/autoparagraph-plugin",
 
-        "aloha":                        "bower_components/aloha-editor/src/lib/aloha/core"
+        "i18n":                        "bower_components/aloha-editor/src/lib/i18n",
+        "vendor":                        "bower_components/aloha-editor/src/lib/vendor",
+        "aloha":                        "bower_components/aloha-editor/src/lib/aloha",
+        "util":                         "bower_components/aloha-editor/src/lib/util"
     },
     "shim": {
         "logging": { "exports": "logging" },

diff --git a/src/pat-editor.js b/src/pat-editor.js
@@ -2,26 +2,56 @@
     if (typeof define === 'function' && define.amd) {
         define([
             "jquery",
+            "jquery.browser",
             "mockup-patterns-base",
             "pat-registry",
-            "pat-parser",
-            "aloha"
+            "pat-parser"
         ], function() {
             return factory.apply(this, arguments);
         });
     } else {
-        factory($, Base, root.patterns, root.patterns.Parser, Aloha);
+        factory($, null, Base, root.patterns, root.patterns.Parser);
     }
-}(this, function($, Base, registry, Parser, Aloha) {
-  'use strict';
-  var parser = new Parser("editor");
+}(this, function($, dummy, Base, registry, Parser) {
+    'use strict';
+    var parser = new Parser("editor");
+    parser.add_argument("aloha-settings", {}); // Allows the user to specify Aloha settings via JSON
+    parser.add_argument("toolbar-floating", false);
 
-  return Base.extend({
-    name: 'editor',
-    trigger: ".pat-editor",
 
-    init: function patEditor($el, opts) {
-        debugger;
-    }
-  });
+    return Base.extend({
+        name: 'editor',
+        trigger: ".pat-editor",
+
+        init: function patEditor() {
+            var options = parser.parse(this.$el);
+
+            if (typeof window.Aloha == "undefined") {
+                window.Aloha = { settings: {} };
+            }
+            // The "aloha-settings" parameter allows the user to override any
+            // Aloha setting by specifying a JSON object.
+            if (options.alohaSettings && options.alohaSettings.length) {
+                $.extend(true, Aloha.settings, options.alohaSettings);
+            }
+
+            Aloha.settings.toolbar = Aloha.settings.toolbar || {};
+            $.extend(true, Aloha.settings, { toolbar: { floating: options.toolBarFloating || false }});
+
+            Aloha.settings.logLevels = { 'error': true, 'warn': true, 'info': true, 'debug': false, 'deprecated': true };
+            Aloha.settings.errorhandling = false;
+            Aloha.settings.ribbon = {enable: true};
+            Aloha.settings.plugins = Aloha.settings.plugins || {};
+            Aloha.settings.plugins.load = "common/ui, common/format, common/link";
+
+            Aloha.settings.sidebar = Aloha.settings.sidebar || {};
+            Aloha.settings.sidebar.disabled = true;
+
+            require(['aloha'], function () {
+                Aloha.ready(function () {
+                    Aloha.jQuery('#textarea').aloha();
+                }.bind(this));
+            });
+        }
+    });
 }));