Skip to content

Commit

Permalink
feat: toolbar customisation
Browse files Browse the repository at this point in the history
  • Loading branch information
sibiraj-s committed Oct 3, 2017
1 parent b448b31 commit c6a2151
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 72 deletions.
2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.7592105dd06098fc91a8.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.e5226f3858d1515860a8.bundle.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.b1bf12244992a3cb3ea1.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.cf628fad2abd6cb02dba.bundle.js"></script></body></html>

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions docs/main.cf628fad2abd6cb02dba.bundle.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/main.e5226f3858d1515860a8.bundle.js

This file was deleted.

56 changes: 28 additions & 28 deletions src/app/ngx-editor/ngx-editor.component.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<div class="ngx-editor" id="ngxEditor">
<div class="toolbar responsive">
<div class="toolbar">
<div class="set">
<button (click)="executeCommand('bold')" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button (click)="executeCommand('italic')" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button (click)="executeCommand('underline')" title="Underline"><i class="fa fa-underline" aria-hidden="true"></i></button>
<button (click)="executeCommand('strikeThrough')" title="Strikethrough"><i class="fa fa-strikethrough" aria-hidden="true"></i></button>
<button (click)="executeCommand('superscript')" title="Superscript"><i class="fa fa-superscript" aria-hidden="true"></i></button>
<button (click)="executeCommand('subscript')" title="Subscript"><i class="fa fa-subscript" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('bold')" (click)="executeCommand('bold')" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('italic')" (click)="executeCommand('italic')" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('underline')" (click)="executeCommand('underline')" title="Underline"><i class="fa fa-underline" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="executeCommand('strikeThrough')" title="Strikethrough"><i class="fa fa-strikethrough" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('superscript')" (click)="executeCommand('superscript')" title="Superscript"><i class="fa fa-superscript" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('subscript')" (click)="executeCommand('subscript')" title="Subscript"><i class="fa fa-subscript" aria-hidden="true"></i></button>
</div>
<div class="set no-sm-device">
<button (click)="executeCommand('justifyLeft')" title="Justify Left"><i class="fa fa-align-left" aria-hidden="true"></i></button>
<button (click)="executeCommand('justifyCenter')" title="Justify Center"><i class="fa fa-align-center" aria-hidden="true"></i></button>
<button (click)="executeCommand('justifyRight')" title="Justify Right"><i class="fa fa-align-right" aria-hidden="true"></i></button>
<button (click)="executeCommand('justifyFull')" title="Justify"><i class="fa fa-align-justify" aria-hidden="true"></i></button>
<button (click)="executeCommand('indent')" title="Indent"><i class="fa fa-indent" aria-hidden="true"></i></button>
<button (click)="executeCommand('outdent')" title="Outdent"><i class="fa fa-outdent" aria-hidden="true"></i></button>
<div class="set">
<button *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="executeCommand('justifyLeft')" title="Justify Left"><i class="fa fa-align-left" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="executeCommand('justifyCenter')" title="Justify Center"><i class="fa fa-align-center" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('justifyRight')" (click)="executeCommand('justifyRight')" title="Justify Right"><i class="fa fa-align-right" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('justifyFull')" (click)="executeCommand('justifyFull')" title="Justify"><i class="fa fa-align-justify" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('indent')" (click)="executeCommand('indent')" title="Indent"><i class="fa fa-indent" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('outdent')" (click)="executeCommand('outdent')" title="Outdent"><i class="fa fa-outdent" aria-hidden="true"></i></button>
</div>
<div class="set no-md-device">
<button (click)="executeCommand('cut')" title="Cut"><i class="fa fa-scissors" aria-hidden="true"></i></button>
<button (click)="executeCommand('copy')" title="Copy"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button (click)="executeCommand('delete')" title="Delete"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button (click)="executeCommand('removeFormat')" title="Clear Formatting"><i class="fa fa-eraser" aria-hidden="true"></i></button>
<button (click)="executeCommand('undo')" title="Undo"><i class="fa fa-undo" aria-hidden="true"></i></button>
<button (click)="executeCommand('redo')" title="Redo"><i class="fa fa-repeat" aria-hidden="true"></i></button>
<div class="set">
<button *ngIf="canEnableToolbarOptions('cut')" (click)="executeCommand('cut')" title="Cut"><i class="fa fa-scissors" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('copy')" (click)="executeCommand('copy')" title="Copy"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('delete')" (click)="executeCommand('delete')" title="Delete"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('removeFormat')" (click)="executeCommand('removeFormat')" title="Clear Formatting"><i class="fa fa-eraser" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('undo')" (click)="executeCommand('undo')" title="Undo"><i class="fa fa-undo" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('redo')" (click)="executeCommand('redo')" title="Redo"><i class="fa fa-repeat" aria-hidden="true"></i></button>
</div>
<div class="set no-md-device">
<button (click)="executeCommand('insertParagraph')" title="Paragraph"><i class="fa fa-paragraph" aria-hidden="true"></i></button>
<button (click)="blockQuote()" title="Blockquote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button (click)="removeQuote()" title="Remove Blockquote"><i class="fa fa-quote-right" aria-hidden="true"></i></button>
<button (click)="executeCommand('insertHorizontalRule')" title="Horizontal Line"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button (click)="executeCommand('insertUnorderedList')" title="Unodered List"><i class="fa fa-list-ul" aria-hidden="true"></i></button>
<button (click)="executeCommand('insertOrderedList')" title="Ordered List"><i class="fa fa-list-ol" aria-hidden="true"></i></button>
<div class="set">
<button *ngIf="canEnableToolbarOptions('paragraph')" (click)="executeCommand('insertParagraph')" title="Paragraph"><i class="fa fa-paragraph" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('blockquote')" (click)="blockQuote()" title="Blockquote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="removeQuote()" title="Remove Blockquote"><i class="fa fa-quote-right" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="executeCommand('insertHorizontalRule')" title="Horizontal Line"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('orderedList')" (click)="executeCommand('insertUnorderedList')" title="Unodered List"><i class="fa fa-list-ul" aria-hidden="true"></i></button>
<button *ngIf="canEnableToolbarOptions('unorderedList')" (click)="executeCommand('insertOrderedList')" title="Ordered List"><i class="fa fa-list-ol" aria-hidden="true"></i></button>
</div>
</div>
<div class="textarea" [attr.contenteditable]="getBooleanProperty('editable')" [attr.placeholder]="placeholder || config['placeholder']"
Expand Down
22 changes: 0 additions & 22 deletions src/app/ngx-editor/ngx-editor.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,6 @@ $break-xtra-small: "screen and (max-width : 320px)";
}
}
}
&.responsive {
@media #{$break-large} {
.no-lg-device {
display: none;
}
}
@media #{$break-medium} {
.no-md-device {
display: none;
}
}
@media #{$break-small} {
.no-sm-device {
display: none;
}
}
@media #{$break-xtra-small} {
.no-xs-device {
display: none;
}
}
}
}
.textarea {
min-height: 5rem;
Expand Down
21 changes: 9 additions & 12 deletions src/app/ngx-editor/ngx-editor.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, OnInit, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';
import { ngxEditorConfig } from './ngx-editor.defaults';
import * as Utils from "./ngx-editor.utils";

@Component({
selector: 'app-ngx-editor',
Expand All @@ -11,9 +12,6 @@ export class NgxEditorComponent implements OnInit {

@Output() htmlChange = new EventEmitter();

/*
* default configurations
*/
_config: any;
_html: any;

Expand Down Expand Up @@ -83,15 +81,14 @@ export class NgxEditorComponent implements OnInit {
* return values for attributes that accepts boolean
*/
getBooleanProperty(value) {
if (this[value] === false) {
return false;
}
else if (this[value] === undefined) {
return this.config[value];
}
else {
return true;
}
return Utils.getBooleanProperty(value, this.config);
}

/*
* enable or diable toolbar based on configuration
*/
canEnableToolbarOptions(value) {
return Utils.canEnableToolbarOptions(value, this.config['toolbar']);
}

/*
Expand Down
13 changes: 6 additions & 7 deletions src/app/ngx-editor/ngx-editor.defaults.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ export const ngxEditorConfig = {
minHeight: '0rem',
translate: 'yes',
placeholder: 'Enter text here...',
toolbar: {
text: ['fontFamily', 'fontSize', 'bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
align: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
action: ['cut', 'copy', 'paste', 'delete', 'removeFormat', 'undo', 'redo'],
insert: ['image', 'paragraph', 'blockquote', 'removeBlockquote', 'html', 'horizontalLine', 'orderedList', 'unorderedList'],
extras: ['code', 'fullscreen', 'print']
}
toolbar: [
['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList']
]
};
45 changes: 45 additions & 0 deletions src/app/ngx-editor/ngx-editor.utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* enable or diable toolbar based on configuration
*/
export function canEnableToolbarOptions(value, toolbar) {

if (value) {
if (toolbar['length'] === 0) {
return true;
} else {
return toolbar.find(array => {
return array.includes(value);
})
}
}
else {
return false;
}
}

export function isToolbarDefault(toolbar) {

if (toolbar) {
return toolbar.find(array => {
return array.includes('default');
})
}
else {
return false;
}
}

/*
* return values for attributes that accepts boolean
*/
export function getBooleanProperty(value, config) {
if (this[value] === false) {
return false;
}
else if (this[value] === undefined) {
return config[value];
}
else {
return true;
}
}

0 comments on commit c6a2151

Please sign in to comment.