feat: Overflow style fix, show toolbar feature, readme spelling fix (#29

)

* style(ngx-editor): set overflow x to hidden and overflow y to auto

stops the horizontal scroll bar from showing up in the editor

* feat(ngx-editor-toolbar): added showToolbar input variable

added the ability to show or hide the toolbar using a showToolbar input parameter

* docs(readme): fixed spelling error for FormsModule

.gitignore

@@ -26,6 +26,9 @@
 !.vscode/launch.json
 !.vscode/extensions.json
 
+# IDE - VS
+.vs/*
+
 # misc
 /.sass-cache
 /connect.lock

README.md

@@ -53,7 +53,7 @@ Then in HTML
 <app-ngx-editor [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>
 ```
 
-For `ngModel` to work, You must import `FromsModule` from `@angular/forms`
+For `ngModel` to work, You must import `FormsModule` from `@angular/forms`
 
 ### Documentation
 

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html

@@ -1,4 +1,4 @@
-<div class="ngx-toolbar">
+<div class="ngx-toolbar" *ngIf="showToolbar">
   <div class="ngx-toolbar-set">
     <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="triggerCommand('bold')" title="Bold" [disabled]="!enableToolbar">
       <i class="fa fa-bold" aria-hidden="true"></i>
@@ -113,3 +113,5 @@
     </button>
   </div>
 </div>
+
+<div class="ngx-toolbar" *ngIf="!showToolbar"></div>

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts

@@ -11,6 +11,7 @@ export class NgxEditorToolbarComponent {
 
   @Input() config: any;
   @Input() enableToolbar = false;
+  @Input() showToolbar = true;
   @Output() execute: EventEmitter<string> = new EventEmitter<string>();
 
   constructor() { }

src/app/ngx-editor/ngx-editor.component.html

@@ -1,6 +1,6 @@
 <div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
 
-  <app-ngx-editor-toolbar [config]="config" [enableToolbar]="enableToolbar" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>
+  <app-ngx-editor-toolbar [config]="config" [enableToolbar]="enableToolbar" [showToolbar]="showToolbar" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>
 
   <!-- text area -->
   <div class="ngx-editor-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (input)="onContentChange($event.target.innerHTML)"

src/app/ngx-editor/ngx-editor.component.scss

@@ -17,7 +17,8 @@
         border: 1px solid #ddd;
         border-top: transparent !important;
         background-color: #fff;
-        overflow: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
 
         &:focus,
         &.focus {

src/app/ngx-editor/ngx-editor.component.ts

@@ -37,6 +37,7 @@ export class NgxEditorComponent implements OnInit, ControlValueAccessor {
   @Input() toolbar: any;
   @Input() resizer = 'stack';
   @Input() config = ngxEditorConfig;
+  @Input() showToolbar = true;
 
   @ViewChild('ngxTextArea') textArea: any;