Added new component and used TinyMCE

AKosmachyov · May 30, 2017 · 779a993 · 779a993
1 parent 9cc62ea
commit 779a993
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/app/app.module.ts b/app/app.module.ts
@@ -12,6 +12,7 @@ import { DashboardComponent } from './components/dashboard.component';
 import { EditorNewsComponent } from './components/editor-news.component';
 import { LoginComponent } from './components/login.component';
 import { CheckinComponent } from './components/checkin.component';
+import { ContentEditorComponent } from './components/content-editor.component';
 
 import { NewsService } from './services/news-service';
 import { AuthService } from './services/auth.service';
@@ -34,6 +35,7 @@ import { NewsFilterPipe } from './pipes/news-filter.pipe';
         EditorNewsComponent,
         LoginComponent,
         CheckinComponent,
+        ContentEditorComponent,
         NewsFilterPipe
     ],
     bootstrap: [ AppComponent ],

diff --git a/app/components/content-editor.component.ts b/app/components/content-editor.component.ts
@@ -0,0 +1,27 @@
+import { Component, AfterViewInit } from '@angular/core';
+
+declare var tinymce: any;
+
+@Component({
+    selector: 'content-editor',
+    template: `<textarea id="editor"></textarea>`
+})
+export class ContentEditorComponent implements AfterViewInit {
+
+    ngAfterViewInit() {
+        tinymce.init({
+            selector: '#editor',
+            height: 300,
+            menubar: false,
+            plugins: [
+                'advlist autolink lists link image preview',
+                'searchreplace visualblocks code fullscreen',
+                'media table contextmenu paste code'
+            ],
+            toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+            content_css: [
+                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
+                '//www.tinymce.com/css/codepen.min.css']
+        });
+    }
+}
diff --git a/app/components/editor-news.component.ts b/app/components/editor-news.component.ts
@@ -27,10 +27,9 @@ import { NewsService } from '../services/news-service';
                       required minlength="1" maxlength="200" autocomplete="off"></textarea>
                       
             <label for="content">Текст</label>
-            <textarea name="content" cols="30" rows="15" class="form-control" [(ngModel)]="news.content"
-                      required minlength="1" autocomplete="off"></textarea>
+            <content-editor name="content"></content-editor>
             
-            <button class="btn btn-info" (click)="submit()" [disabled]="!userForm.valid">{{buttonText}}</button>
+            <button class="btn btn-info center-block" (click)="submit()" [disabled]="!userForm.valid">{{buttonText}}</button>
          </form>
          <div *ngIf="displayError">
                 <h1 class="err-block">{{errorStr}}</h1>
@@ -52,15 +51,10 @@ import { NewsService } from '../services/news-service';
         label {
             margin: 11px 0;
         }
-        textarea[name="content"] {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        textarea + button {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            width: 100%;
-            margin-bottom: 30px;
+        content-editor + button {
+            width: 70%;
+            margin-top: 20px;
+            margin-bottom: 20px;
         }
         .ng-touched.ng-invalid {
            border-color: #a94442;

diff --git a/app/index.html b/app/index.html
@@ -5,11 +5,13 @@
     <meta charset="UTF-8">
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="app/systemjs.config.js"></script>
+
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
     <script>
         System.import('app').catch(function(err){ console.error(err); });
     </script>