feat: insert link

sibiraj-s · Oct 23, 2017 · 63e401b · 63e401b
1 parent d3febc1
commit 63e401b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 7 deletions.
diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html
@@ -1,4 +1,6 @@
 <div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
+
+  <!-- toolbar -->
   <div class="ngx-toolbar">
     <div class="ngx-toolbar-set">
       <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="executeCommand('bold')" title="Bold">
@@ -91,9 +93,22 @@
         <i class="fa fa-list-ol" aria-hidden="true"></i>
       </button>
     </div>
+    <div class="ngx-toolbar-set">
+      <button class="ngx-editor-button" *ngIf="canEnableToolbarOptions('link')" (click)="createLink()" title="Insert Link">
+        <i class="fa fa-link" aria-hidden="true"></i>
+      </button>
+    </div>
   </div>
+
+  <!-- text area -->
   <div class="ngx-editor-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)"
     [attr.translate]="config['translate']" [attr.spellcheck]="config['spellcheck']" [style.height]="config['height']" [style.minHeight]="minHeight || config['minHeight']"
     [style.resize]="canResize()" #ngxTextArea></div>
+
+  <!-- message box -->
+  <div class="ngx-editor-message" *ngIf="ngxMessage" (dblclick)="clearMessage()">
+    {{ngxMessage}}
+  </div>
+
   <app-ngx-grippie *ngIf="resizer === 'stack'"></app-ngx-grippie>
 </div>
diff --git a/src/app/ngx-editor/ngx-editor.component.scss b/src/app/ngx-editor/ngx-editor.component.scss
@@ -29,8 +29,8 @@
                 border-right: 1px solid #ddd;
                 &:hover {
                     cursor: pointer;
-                    background-color: #e3e3e3;
-                    transition: 0.5s ease;
+                    background-color: #f1f1f1;
+                    transition: 0.2s ease;
                 }
                 &:focus,
                 &.focus {
@@ -39,6 +39,14 @@
                 &:last-child {
                     border-right: transparent;
                 }
+                &:first-child {
+                    border-top-left-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
+                &:last-child {
+                    border-top-right-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                }
             }
         }
     }
@@ -59,4 +67,13 @@
             padding-left: 0.5rem;
         }
     }
+    .ngx-editor-message {
+        font-size: 80%;
+        background-color: #f1f1f1;
+        border: 1px solid #ddd;
+        border-top: transparent;
+        padding: 0 0.5rem;
+        padding-bottom: 0.1rem;
+        transition: 0.5s ease-in;
+    }
 }
diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts
@@ -17,6 +17,7 @@ export class NgxEditorComponent implements OnInit {
   _config: any;
   _html: any;
   _resizer: string;
+  ngxMessage: string;
 
   @Input() editable: boolean;
   @Input() spellcheck: boolean;
@@ -85,13 +86,14 @@ export class NgxEditorComponent implements OnInit {
 
   constructor() { }
 
+  /*
+   * editor actions
+   */
   executeCommand(commandName) {
-    const isExecuted = document.execCommand(commandName, false, null);
+    document.execCommand(commandName, false, null);
   }
 
-  /*
-   * blockquote
-   */
+  // blockquote
   blockQuote() {
     document.execCommand('formatBlock', false, '<blockquote>');
   }
@@ -100,6 +102,35 @@ export class NgxEditorComponent implements OnInit {
     document.execCommand('formatBlock', false, 'div');
   }
 
+  // insert link
+  createLink() {
+    const selection = document.getSelection();
+
+    if (selection['type'] === 'None') {
+      this.createMessage('No selection made');
+    } else {
+      const linkURL = prompt('Enter URL', 'http://');
+      if (linkURL) {
+        document.execCommand('createLink', false, linkURL);
+      }
+    }
+
+  }
+
+  /*
+   * message box
+   */
+  createMessage(message) {
+    this.ngxMessage = message;
+    setTimeout(() => {
+      this.clearMessage();
+    }, 5000)
+  }
+
+  clearMessage() {
+    this.ngxMessage = undefined;
+  }
+
   /*
    * enable or diable toolbar based on configuration
    */

diff --git a/src/app/ngx-editor/ngx-editor.defaults.ts b/src/app/ngx-editor/ngx-editor.defaults.ts
@@ -11,6 +11,7 @@ export const ngxEditorConfig = {
     ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
     ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
     ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
-    ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList']
+    ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
+    ['link']
   ]
 };