diff --git a/README.md b/README.md index a63cdea87..5773ef349 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,22 @@ editorConfig: AngularEditorConfig = { ``` For `ngModel` to work, you must import `FormsModule` from `@angular/forms`, or for `formControlName`, you must import `ReactiveFormsModule` from `@angular/forms` +### Custom buttons + +You can define your custom buttons with custom actions using executeCommandFn. It accepts commands from [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). +The first argument of this method is aCommandName and the second argument is aValueArgument. Example shows a button that adds Angular editor logo into the editor. +```html + + + + + + + + +``` + ## API ### Inputs | Input | Type | Default | Required | Description | diff --git a/projects/angular-editor-app/src/app/app.component.html b/projects/angular-editor-app/src/app/app.component.html index 407596cc0..72931bb34 100644 --- a/projects/angular-editor-app/src/app/app.component.html +++ b/projects/angular-editor-app/src/app/app.component.html @@ -6,7 +6,13 @@

Angular Editor



+ (blur)="onBlur($event)"> + + + + + +

HTML Output: {{ htmlContent1 }}

diff --git a/projects/angular-editor-app/src/app/app.component.ts b/projects/angular-editor-app/src/app/app.component.ts index f42001d55..f12c5dcea 100644 --- a/projects/angular-editor-app/src/app/app.component.ts +++ b/projects/angular-editor-app/src/app/app.component.ts @@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core'; import {AngularEditorConfig} from 'angular-editor'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +const ANGULAR_EDITOR_LOGO_URL = 'https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true' + @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -14,6 +16,7 @@ export class AppComponent implements OnInit { htmlContent1 = ''; htmlContent2 = ''; + angularEditorLogo = `angular editor logo`; config1: AngularEditorConfig = { editable: true, diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.html b/projects/angular-editor/src/lib/ae-button/ae-button.component.html new file mode 100644 index 000000000..1d4aec1ec --- /dev/null +++ b/projects/angular-editor/src/lib/ae-button/ae-button.component.html @@ -0,0 +1,5 @@ + + diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.scss b/projects/angular-editor/src/lib/ae-button/ae-button.component.scss new file mode 100644 index 000000000..bd6520d69 --- /dev/null +++ b/projects/angular-editor/src/lib/ae-button/ae-button.component.scss @@ -0,0 +1,13 @@ +@import "../style"; + +.select-button { + display: inline-block; + // border: #000066 solid; + // padding-right: 10px; + // padding: auto; + &.disabled { + cursor: pointer; + background-color: #f1f1f1; + transition: 0.2s ease; + } +} diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.spec.ts b/projects/angular-editor/src/lib/ae-button/ae-button.component.spec.ts new file mode 100644 index 000000000..0c0803a6a --- /dev/null +++ b/projects/angular-editor/src/lib/ae-button/ae-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AeButtonComponent } from './ae-button.component'; + +describe('AeButtonComponent', () => { + let component: AeButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AeButtonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AeButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/angular-editor/src/lib/ae-button/ae-button.component.ts b/projects/angular-editor/src/lib/ae-button/ae-button.component.ts new file mode 100644 index 000000000..b04866f8c --- /dev/null +++ b/projects/angular-editor/src/lib/ae-button/ae-button.component.ts @@ -0,0 +1,20 @@ +import {Component, EventEmitter, Input, Output, ViewEncapsulation} from '@angular/core'; + + +@Component({ + selector: 'ae-button', + templateUrl: './ae-button.component.html', + styleUrls: ['./ae-button.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class AeButtonComponent { + + @Input() id = ''; + @Input() title = ''; + @Input() disabled = false; + @Input() iconClass = ''; + @Output() buttonClick = new EventEmitter(); + + constructor() { } + +} diff --git a/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.html b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.html new file mode 100644 index 000000000..d7be1009e --- /dev/null +++ b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.scss b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.spec.ts b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.spec.ts new file mode 100644 index 000000000..38823c42d --- /dev/null +++ b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AeToolbarSetComponent } from './ae-toolbar-set.component'; + +describe('AeToolbarSetComponent', () => { + let component: AeToolbarSetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AeToolbarSetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AeToolbarSetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.ts b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.ts new file mode 100644 index 000000000..aaa2cbe6d --- /dev/null +++ b/projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.ts @@ -0,0 +1,13 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + selector: 'ae-toolbar-set', + templateUrl: './ae-toolbar-set.component.html', + styleUrls: ['./ae-toolbar-set.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class AeToolbarSetComponent { + + constructor() { } + +} diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html index 6a2521f1f..54b40c5b3 100644 --- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.html +++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.html @@ -1,90 +1,95 @@
-
- - -
-
- - - - - - -
-
- - - - -
-
- - -
-
- - -
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- + + -
-
- + + -
-
+ + -
-
+ + -
-
- - + + + + + + - - - -
-
- -
-
- -
+ + + + + + + + + + + + + + + +
diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss b/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss index 131c0cbf7..1c19cd89f 100644 --- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss +++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.scss @@ -1,13 +1 @@ @import "style"; - -.select-button { - display: inline-block; - // border: #000066 solid; - // padding-right: 10px; - // padding: auto; - &.disabled { - cursor: pointer; - background-color: #f1f1f1; - transition: 0.2s ease; - } -} diff --git a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts index 8c025ff47..3307473c1 100644 --- a/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts +++ b/projects/angular-editor/src/lib/angular-editor-toolbar.component.ts @@ -1,4 +1,14 @@ -import {Component, ElementRef, EventEmitter, Inject, Input, Output, Renderer2, ViewChild} from '@angular/core'; +import { + Component, + ContentChild, + ElementRef, + EventEmitter, + Inject, + Input, + Output, + Renderer2, TemplateRef, + ViewChild +} from '@angular/core'; import {AngularEditorService, UploadResponse} from './angular-editor.service'; import {HttpResponse, HttpEvent} from '@angular/common/http'; import {DOCUMENT} from '@angular/common'; diff --git a/projects/angular-editor/src/lib/angular-editor.component.html b/projects/angular-editor/src/lib/angular-editor.component.html index 37eecb6ed..8764a9962 100644 --- a/projects/angular-editor/src/lib/angular-editor.component.html +++ b/projects/angular-editor/src/lib/angular-editor.component.html @@ -17,7 +17,13 @@ [defaultFontSize]="config.defaultFontSize" [hiddenButtons]="config.toolbarHiddenButtons" (execute)="executeCommand($event)" - > + > + + +
; + executeCommandFn = this.executeCommand.bind(this); @Output() viewMode = new EventEmitter(); @@ -116,8 +118,9 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft /** * Executed command from editor header buttons * @param command string from triggerCommand + * @param value */ - executeCommand(command: string) { + executeCommand(command: string, value?: string) { this.focus(); if (command === 'focus') { return; @@ -132,7 +135,7 @@ export class AngularEditorComponent implements OnInit, ControlValueAccessor, Aft this.editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre'); this.onContentChange(this.textArea.nativeElement); } else { - this.editorService.executeCommand(command); + this.editorService.executeCommand(command, value); } this.exec(); } diff --git a/projects/angular-editor/src/lib/angular-editor.module.ts b/projects/angular-editor/src/lib/angular-editor.module.ts index 818847987..7ae573f57 100644 --- a/projects/angular-editor/src/lib/angular-editor.module.ts +++ b/projects/angular-editor/src/lib/angular-editor.module.ts @@ -4,13 +4,15 @@ import {AngularEditorToolbarComponent} from './angular-editor-toolbar.component' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; import { AeSelectComponent } from './ae-select/ae-select.component'; +import {AeButtonComponent} from "./ae-button/ae-button.component"; +import { AeToolbarSetComponent } from './ae-toolbar-set/ae-toolbar-set.component'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ], - declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent], - exports: [AngularEditorComponent, AngularEditorToolbarComponent] + declarations: [AngularEditorComponent, AngularEditorToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent], + exports: [AngularEditorComponent, AngularEditorToolbarComponent, AeButtonComponent, AeToolbarSetComponent] }) export class AngularEditorModule { } diff --git a/projects/angular-editor/src/lib/angular-editor.service.ts b/projects/angular-editor/src/lib/angular-editor.service.ts index b9877e773..a0b9a77fa 100644 --- a/projects/angular-editor/src/lib/angular-editor.service.ts +++ b/projects/angular-editor/src/lib/angular-editor.service.ts @@ -24,14 +24,15 @@ export class AngularEditorService { /** * Executed command from editor header buttons exclude toggleEditorMode * @param command string from triggerCommand + * @param value */ - executeCommand(command: string) { + executeCommand(command: string, value?: string) { const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre']; if (commands.includes(command)) { this.doc.execCommand('formatBlock', false, command); return; } - this.doc.execCommand(command, false, null); + this.doc.execCommand(command, false, value); } /** diff --git a/projects/angular-editor/src/public-api.ts b/projects/angular-editor/src/public-api.ts index 0bcae4d08..90d4a1c17 100644 --- a/projects/angular-editor/src/public-api.ts +++ b/projects/angular-editor/src/public-api.ts @@ -4,6 +4,9 @@ export * from './lib/angular-editor.service'; export * from './lib/angular-editor.component'; +export * from './lib/ae-button/ae-button.component'; +export * from './lib/ae-toolbar-set/ae-toolbar-set.component'; +export * from './lib/ae-select/ae-select.component'; export * from './lib/angular-editor-toolbar.component'; export * from './lib/angular-editor.module'; export { AngularEditorConfig, CustomClass } from './lib/config';