Feature/custom buttons

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
+<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig">
+  <ng-template #customButtons let-executeCommandFn="executeCommandFn">
+    <ae-toolbar-set>
+      <ae-button iconClass="fa fa-html5" title="Angular editor logo"
+                 (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)">
+      </ae-button>
+    </ae-toolbar-set>
+  </ng-template>
+</angular-editor>
+```
+
 ## API
 ### Inputs
 | Input  | Type | Default | Required | Description |

projects/angular-editor-app/src/app/app.component.html

@@ -6,7 +6,13 @@ <h1>Angular Editor</h1>
   <input id="test_input">
   <br><br>
   <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
-                  (blur)="onBlur($event)"></angular-editor>
+                  (blur)="onBlur($event)">
+    <ng-template #customButtons let-executeCommandFn="executeCommandFn">
+      <ae-toolbar-set>
+        <ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
+      </ae-toolbar-set>
+    </ng-template>
+  </angular-editor>
   <p class="html">
     HTML Output:  {{ htmlContent1 }}
   </p>

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 = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
 
   config1: AngularEditorConfig = {
     editable: true,

projects/angular-editor/src/lib/ae-button/ae-button.component.html

@@ -0,0 +1,5 @@
+<button type="button" class="angular-editor-button" tabindex="-1"
+        [id]="id" [title]="title" [disabled]="disabled" (click)="buttonClick.emit()">
+  <i [class]="iconClass"></i>
+</button>
+

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;
+  }
+}

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<AeButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AeButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AeButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() { }
+
+}

projects/angular-editor/src/lib/ae-toolbar-set/ae-toolbar-set.component.html

@@ -0,0 +1,3 @@
+<div class="angular-editor-toolbar-set">
+  <ng-content></ng-content>
+</div>

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<AeToolbarSetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AeToolbarSetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AeToolbarSetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() { }
+
+}