Merge pull request #47 from Tibing/dev-editors

feat(app\pages): add editor page and ckeditor

bower.json

@@ -16,6 +16,7 @@
     "tests"
   ],
   "dependencies": {
-    "Ionicons": "ionicons#~2.0.1"
+    "Ionicons": "ionicons#~2.0.1",
+    "ckeditor": "^4.5.9"
   }
 }

package.json

@@ -35,6 +35,7 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.16",
+    "ng2-ckeditor": "^1.0.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",

src/app/app.menu.ts

@@ -7,6 +7,18 @@ export const menuItems = [
     expanded: false,
     order: 0
   },
+  {
+    title: 'Editors',
+    component: 'Editors',
+    icon: 'ion-edit',
+    order: 100,
+    subMenu: [
+      {
+        title: 'CKEditor',
+        component: 'Ckeditor'
+      }
+    ]
+  },
   {
     title: 'Charts',
     component: 'Charts',

src/app/pages/editors/components/ckeditor/ckeditor.component.ts

@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {CKEditor} from 'ng2-ckeditor';
+import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+
+import './ckeditor.loader.ts';
+
+@Component({
+  selector: 'ckeditor',
+  directives: [CKEditor, BaCard],
+  template: require('./ckeditor.html')
+})
+
+export class Ckeditor {
+  private ckeditorContent;
+  private config;
+  
+  constructor() {
+    this.ckeditorContent = `<p>Hello CKEditor</p>`;
+    this.config = {uiColor: '#F0F3F4', height: '600'};
+  }
+}

src/app/pages/editors/components/ckeditor/ckeditor.html

@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="col-md-12">
+    <ba-card title="ckeditor" baCardClass="with-scroll">
+      <ckeditor [(ngModel)]="ckeditorContent" [config]="config"></ckeditor>
+    </ba-card>
+  </div>
+</div>

src/app/pages/editors/components/ckeditor/ckeditor.loader.ts

@@ -0,0 +1,2 @@
+window.CKEDITOR_BASEPATH = '//cdn.ckeditor.com/4.5.9/standard/';
+require('ckeditor');

src/app/pages/editors/components/ckeditor/index.ts

@@ -0,0 +1 @@
+export * from './ckeditor.component';

src/app/pages/editors/editors.component.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {RouteConfig} from '@angular/router-deprecated';
+
+import {Ckeditor} from "./components/ckeditor";
+
+@Component({
+  selector: 'editors',
+  template: `<router-outlet></router-outlet>`
+})
+
+@RouteConfig([
+  {
+    name: 'Ckeditor',
+    component: Ckeditor,
+    path: '/ckeditor',
+    useAsDefault: true
+  }
+])
+export class Editors {
+  constructor() {
+  }
+}

src/app/pages/editors/index.ts

@@ -0,0 +1 @@
+export * from './editors.component';

src/app/pages/pages.component.ts

@@ -9,6 +9,7 @@ import {Maps} from './maps';
 import {Charts} from './charts';
 import {Forms} from './forms';
 import {Tables} from './tables';
+import {Editors} from "./editors";
 
 @Component({
   selector: 'pages',
@@ -40,6 +41,11 @@ import {Tables} from './tables';
     `
 })
 @RouteConfig([
+  {
+    name: 'Editors',
+    component: Editors,
+    path: '/editors/...',
+  },
   {
     name: 'Dashboard',
     component: Dashboard,