Commit 8f0e4db11ef83935e20a448fb2086ba5a888e4d9

Authored by Victor Costa
1 parent 33ae65dd

Create component to encapsulate wysiwyg editor

src/app/article/basic-editor/basic-editor.component.ts
... ... @@ -21,7 +21,6 @@ export class BasicEditorComponent {
21 21 id: number;
22 22 parentId: number;
23 23 profileIdentifier: string;
24   - editorOptions = {};
25 24  
26 25 constructor(private articleService: ArticleService,
27 26 private profileService: ProfileService,
... ...
src/app/article/basic-editor/basic-editor.html
... ... @@ -8,7 +8,7 @@
8 8 </div>
9 9 <div class="form-group">
10 10 <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
11   - <textarea ckeditor="vm.editorOptions" class="form-control" id="bodyInput" rows="10" ng-model="vm.article.body"></textarea>
  11 + <html-editor [(value)]="vm.article.body"></html-editor>
12 12 </div>
13 13 <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
14 14 <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
... ...
src/app/main/main.component.ts
... ... @@ -29,6 +29,7 @@ import {BodyStateClassesService} from &quot;./../layout/services/body-state-classes.s
29 29 import {Navbar} from "../layout/navbar/navbar";
30 30  
31 31 import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component";
  32 +import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
32 33  
33 34  
34 35 /**
... ... @@ -82,7 +83,7 @@ export class EnvironmentContent {
82 83 directives: [
83 84 ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
84 85 EnvironmentComponent, PeopleBlockComponent,
85   - LinkListBlockComponent, CommunitiesBlockComponent,
  86 + LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
86 87 MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent,
87 88 MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
88 89 ],
... ...
src/app/shared/components/html-editor/html-editor.component.spec.ts 0 → 100644
... ... @@ -0,0 +1,26 @@
  1 +import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
  2 +import {HtmlEditorComponent} from "./html-editor.component";
  3 +
  4 +const htmlTemplate: string = '<html-editor [(value)]="ctrl.value" [options]="ctrl.options"></html-editor>';
  5 +
  6 +describe("Components", () => {
  7 + describe("Html Editor Component", () => {
  8 +
  9 + let helper: ComponentTestHelper<HtmlEditorComponent>;
  10 + beforeEach(angular.mock.module("templates"));
  11 +
  12 + beforeEach((done) => {
  13 + let properties = { value: "value" };
  14 + let cls = createClass({
  15 + template: htmlTemplate,
  16 + directives: [HtmlEditorComponent],
  17 + properties: properties
  18 + });
  19 + helper = new ComponentTestHelper<HtmlEditorComponent>(cls, done);
  20 + });
  21 +
  22 + it("render a textarea", () => {
  23 + expect(helper.find("textarea").length).toEqual(1);
  24 + });
  25 + });
  26 +});
... ...
src/app/shared/components/html-editor/html-editor.component.ts 0 → 100644
... ... @@ -0,0 +1,11 @@
  1 +import {Component, Input} from "ng-forward";
  2 +
  3 +@Component({
  4 + selector: 'html-editor',
  5 + templateUrl: "app/shared/components/html-editor/html-editor.html",
  6 +})
  7 +export class HtmlEditorComponent {
  8 +
  9 + @Input() options: any = {};
  10 + @Input() value: any;
  11 +}
... ...
src/app/shared/components/html-editor/html-editor.html 0 → 100644
... ... @@ -0,0 +1 @@
  1 +<textarea ckeditor="ctrl.options" class="form-control" ng-model="ctrl.value"></textarea>
... ...