Commit 8f0e4db11ef83935e20a448fb2086ba5a888e4d9
1 parent
33ae65dd
Exists in
master
and in
27 other branches
Create component to encapsulate wysiwyg editor
Showing
6 changed files
with
41 additions
and
3 deletions
Show diff stats
src/app/article/basic-editor/basic-editor.component.ts
| @@ -21,7 +21,6 @@ export class BasicEditorComponent { | @@ -21,7 +21,6 @@ export class BasicEditorComponent { | ||
| 21 | id: number; | 21 | id: number; |
| 22 | parentId: number; | 22 | parentId: number; |
| 23 | profileIdentifier: string; | 23 | profileIdentifier: string; |
| 24 | - editorOptions = {}; | ||
| 25 | 24 | ||
| 26 | constructor(private articleService: ArticleService, | 25 | constructor(private articleService: ArticleService, |
| 27 | private profileService: ProfileService, | 26 | private profileService: ProfileService, |
src/app/article/basic-editor/basic-editor.html
| @@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
| 8 | </div> | 8 | </div> |
| 9 | <div class="form-group"> | 9 | <div class="form-group"> |
| 10 | <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label> | 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 | </div> | 12 | </div> |
| 13 | <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button> | 13 | <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button> |
| 14 | <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button> | 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 "./../layout/services/body-state-classes.s | @@ -29,6 +29,7 @@ import {BodyStateClassesService} from "./../layout/services/body-state-classes.s | ||
| 29 | import {Navbar} from "../layout/navbar/navbar"; | 29 | import {Navbar} from "../layout/navbar/navbar"; |
| 30 | 30 | ||
| 31 | import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component"; | 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,7 +83,7 @@ export class EnvironmentContent { | ||
| 82 | directives: [ | 83 | directives: [ |
| 83 | ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent, | 84 | ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent, |
| 84 | EnvironmentComponent, PeopleBlockComponent, | 85 | EnvironmentComponent, PeopleBlockComponent, |
| 85 | - LinkListBlockComponent, CommunitiesBlockComponent, | 86 | + LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent, |
| 86 | MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent, | 87 | MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent, |
| 87 | MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent | 88 | MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent |
| 88 | ], | 89 | ], |
src/app/shared/components/html-editor/html-editor.component.spec.ts
0 → 100644
| @@ -0,0 +1,26 @@ | @@ -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 @@ | @@ -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 | +} |
| @@ -0,0 +1 @@ | @@ -0,0 +1 @@ | ||
| 1 | +<textarea ckeditor="ctrl.options" class="form-control" ng-model="ctrl.value"></textarea> |