bind html content

sibiraj-s · Oct 1, 2017 · 7920e32 · 7920e32
1 parent a2f41a2
commit 7920e32
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@
  <a href="https://github.com/Sibiraj-S/ngx-editor">
    <img src="https://raw.githubusercontent.com/Sibiraj-S/ngx-editor/master/src/assets/icons/ngx-editor.png" alt="ngxEditor">
  </a>
-  <p align="center">A Simple WYSIWYG Editor for Angular2+ Applications.</p>
 </p>
+<p align="center">A Simple WYSIWYG Editor for Angular2+ Applications.</p>
 
 ## Getting Started
 
@@ -14,9 +14,9 @@
 Install via Package managers such as [npm][npm] or [yarn][yarn]
 
 ```bash
-npm install [email protected]alpha.3 --save
+npm install [email protected]beta.1 --save
 # or
-yarn add [email protected]alpha.3
+yarn add [email protected]beta.1
 ```
 
 ### Usage
@@ -36,7 +36,7 @@ Import [font-awesome](https://github.com/FortAwesome/Font-Awesome) into your app
 Then in HTML
 
 ```html
-<app-ngx-editor [placeholder]="'Enter text here...'"></app-ngx-editor>
+<app-ngx-editor [placeholder]="'Enter text here...'" [(html)]="htmlContent"></app-ngx-editor>
 ```
 
 [npm]: https://www.npmjs.com/

diff --git a/docs/3rdpartylicenses.txt b/docs/3rdpartylicenses.txt
@@ -22,25 +22,25 @@ THE SOFTWARE.
 
 [email protected]
 MIT
-Copyright JS Foundation and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 [email protected]

diff --git a/docs/index.html b/docs/index.html
@@ -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 type="text/javascript" src="inline.46e58b87da4dc821140c.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.ac472762543fc930e41a.bundle.js"></script><script type="text/javascript" src="main.7a56d16dad3a02d2e37b.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 type="text/javascript" src="inline.1bb7083ea02906c34bb1.bundle.js"></script><script type="text/javascript" src="polyfills.d8d3d78a4deb2ab66856.bundle.js"></script><script type="text/javascript" src="vendor.c44f4e84d8761a397bba.bundle.js"></script><script type="text/javascript" src="main.532cf5b9b9657b0ccd65.bundle.js"></script></body></html>
diff --git a/docs/inline.1bb7083ea02906c34bb1.bundle.js b/docs/inline.1bb7083ea02906c34bb1.bundle.js
diff --git a/docs/inline.46e58b87da4dc821140c.bundle.js b/docs/inline.46e58b87da4dc821140c.bundle.js
diff --git a/docs/main.532cf5b9b9657b0ccd65.bundle.js b/docs/main.532cf5b9b9657b0ccd65.bundle.js
diff --git a/docs/main.7a56d16dad3a02d2e37b.bundle.js b/docs/main.7a56d16dad3a02d2e37b.bundle.js
diff --git a/.../polyfills.8eba0ab53b5457105d75.bundle.js → .../polyfills.d8d3d78a4deb2ab66856.bundle.js b/.../polyfills.8eba0ab53b5457105d75.bundle.js → .../polyfills.d8d3d78a4deb2ab66856.bundle.js
diff --git a/docs/vendor.ac472762543fc930e41a.bundle.js b/docs/vendor.ac472762543fc930e41a.bundle.js
diff --git a/docs/vendor.c44f4e84d8761a397bba.bundle.js b/docs/vendor.c44f4e84d8761a397bba.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-editor",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -2,10 +2,13 @@
     <div class="logo">
         <img src="assets/icons/ngx-editor.svg" alt="ngx-Editor">
         <h6>A Simple WYSIWYG Editor for Angular2+ Applications.</h6>
-        <h6>(v1.0.0-alpha.3)</h6>
+        <h6>(v1.0.0-beta.1)</h6>
     </div>
     <div class="editor">
-        <app-ngx-editor [config]="editorConfig" [placeholder]="'Enter text here...'"></app-ngx-editor>
+        <app-ngx-editor [config]="editorConfig" [placeholder]="'Enter text here...'" [(html)]="htmlContent"></app-ngx-editor>
+    </div>
+    <div class="html" *ngIf="htmlContent">
+        {{htmlContent}}
     </div>
     <div class="information">
         <h3> Getting Started </h3>
@@ -17,9 +20,9 @@ <h4> Installation </h4>
 
         <pre>
 
-npm install [email protected]alpha.3 --save
+npm install [email protected]beta.1 --save
 # or
-yarn add [email protected]alpha.3 
+yarn add [email protected]beta.1
         </pre>
 
         <h4>Usage</h4>
@@ -35,7 +38,7 @@ <h4>Usage</h4>
 
         <pre>
 
-&lt;app-ngx-editor [placeholder]="'Enter text here...'" &gt;  &lt;app-ngx-editor &gt;
+&lt;app-ngx-editor [placeholder]="'Enter text here...'" [(html)]="htmlContent"&gt;  &lt;/app-ngx-editor&gt;
        </pre>
 
     </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -10,6 +10,17 @@
     .editor {
         margin-bottom: 1rem;
     }
+    .html {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 0.5rem;
+        background-color: #f1f1f1;
+        max-height: 10rem;
+        overflow: auto;
+    }
+    .information {
+        margin-top: 1rem;
+    }
 }
 
 pre {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -13,6 +13,8 @@ export class AppComponent {
     spellCheck: false
   };
 
+  htmlContent = '<span>WYSIWYG Editor for Angular2+ Application</span>';
+
   importCode = `
 import { NgxEditorModule } from 'ngx-editor';
 

diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html
@@ -32,9 +32,6 @@
       <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>
-    <!-- <div class="set no-lg-device">
-      <button (click)="insertHTML('')" title="Code"><i class="fa fa-code" aria-hidden="true"></i></button>
-    </div> -->
   </div>
-  <div class="textarea" contenteditable="true" [attr.placeholder]="placeholder || config['placeholder']"></div>
+  <div class="textarea" contenteditable="true" [attr.placeholder]="placeholder || config['placeholder']" (input)="html = $event.target.innerHTML;htmlContentChange($event.target.innerHTML)"></div>
 </div>
diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, HostListener, Input } from '@angular/core';
+import { Component, OnInit, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';
 import { ngxEditorConfig } from './ngx-editor.defaults';
 
 @Component({
@@ -9,12 +9,21 @@ import { ngxEditorConfig } from './ngx-editor.defaults';
 
 export class NgxEditorComponent implements OnInit {
 
+  @Output() htmlChange = new EventEmitter();
+
   /*
    * default configurations
    */
   _config: any;
+  _html: any;
 
-  @Input() set config(value: JSON) {
+  /*
+   * set default values
+   */
+
+  // set configuration
+  @Input()
+  set config(value: JSON) {
 
     for (const i in ngxEditorConfig) {
       if (!value.hasOwnProperty(i)) {
@@ -23,17 +32,38 @@ export class NgxEditorComponent implements OnInit {
     }
     this._config = value;
   }
-
   get config(): JSON {
     return this._config || ngxEditorConfig;
   }
 
+  // set HTML value
+  @Input()
+  set html(value: any) {
+    this._html = value;
+  }
+  get html(): any {
+    return this._html;
+  }
+
+
   @Input() spellCheck;
   @Input() placeholder;
 
   fullScreen = false;
 
-  constructor() { }
+
+  /*
+   * update html on changes in content editable
+   */
+  htmlContentChange(value) {
+    if (value === '<br>') {
+      this.htmlChange.emit('');
+    } else {
+      this.htmlChange.emit(value);
+    }
+  }
+
+  constructor(private element: ElementRef) { }
 
   executeCommand(commandName) {
     const isExecuted = document.execCommand(commandName, false, null);
@@ -51,16 +81,14 @@ export class NgxEditorComponent implements OnInit {
   }
 
   /*
-   * toggle full screen
+   * ngOnInit
    */
-  toggleFullScreen() {
-    this.fullScreen = !this.fullScreen;
-  }
-
   ngOnInit() {
     if (this.spellCheck === false) {
       this.config['spellCheck'] = this.spellCheck;
     }
+
+    this.element.nativeElement.getElementsByClassName('textarea')[0].innerHTML = this.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 type="text/javascript" src="inline.46e58b87da4dc821140c.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.ac472762543fc930e41a.bundle.js"></script><script type="text/javascript" src="main.7a56d16dad3a02d2e37b.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 type="text/javascript" src="inline.1bb7083ea02906c34bb1.bundle.js"></script><script type="text/javascript" src="polyfills.d8d3d78a4deb2ab66856.bundle.js"></script><script type="text/javascript" src="vendor.c44f4e84d8761a397bba.bundle.js"></script><script type="text/javascript" src="main.532cf5b9b9657b0ccd65.bundle.js"></script></body></html>