Since I had the same problem, I&#39;m sharing the results of my research here:

# **[ng2-ckeditor][1]**
demo [here][2]

[![enter image description here][3]][3]

# [ngx-editor][4]
demo [here][5]
[![enter image description here][6]][6]

# [quill.js for angular][8]
demo [here][9]

Note: Quill uses JSON to store the data internally, not html.

[![enter image description here][10]][10]

# PRIME NG
Theme collection, that features a Quill-based WYSIWYG-editor as well, demo [here][11]. Some of themes are free.

# [ngx-md][12]
A WYSIWYG editor which uses MarkDown rather than HTML, demo [here][13]

**Edit**

If your choice was quill.js, you might want to use [KillerCodeMonkey&#39;s implementation][14] since it is compatible with angular 5.


  [1]: https://github.com/chymz/ng2-ckeditor
  [2]: https://embed.plnkr.co/hnB0R3/
  [3]: https://i.stack.imgur.com/HJArE.png
  [4]: https://github.com/Sibiraj-S/ngx-editor
  [5]: https://ngx-editor.stackblitz.io/
  [6]: https://i.stack.imgur.com/elkkw.png
  [7]: https://i.stack.imgur.com/dPHDF.png
  [8]: https://github.com/surmon-china/ngx-quill-editor
  [9]: https://surmon-china.github.io/ngx-quill-editor/
  [10]: https://i.stack.imgur.com/SxiYO.png
  [11]: https://www.primefaces.org/primeng/#/editor
  [12]: https://www.npmjs.com/package/ngx-md
  [13]: https://dimpu.github.io/ngx-md/
  [14]: https://github.com/KillerCodeMonkey/ngx-quill

Try this simple but powerful WYSIWYG editor for Andular 6-12 (native)
## [AngularEditor][1] ##

Note: This native Angular 6+ WYSIWYG editor was created as library.

[![!\[AngularEditor][2]][2]

Demo is [here][3]

PR or new features request are welcome.

This editor originally created as part of my corporate project [https://online.freicon.ru/][5], but I extracted it into separate library and post as open source project. I hope this helps someone solve their problems.


  [1]: https://github.com/kolkov/angular-editor
  [2]: https://user-images.githubusercontent.com/216412/69763434-259cd800-113b-11ea-918f-0565ebce0e48.gif
  [3]: https://angular-editor-wysiwyg.stackblitz.io/
  [4]: https://bugs.chromium.org/p/chromium/issues/detail?id=848912#c3
  [5]: https://online.freicon.ru/

Thanks @Ronin for sharing your research. Here is my feedback on a couple I tested.

[NGX-EDITOR][1]

First I tried [ngx-editor][1] and was relatively easy to install and use. Only needed ngs-boostrap and fontAwesome as dependencies. Hoever the only drawback I found for my requirements was the adding link widget. This library does not remember the link that you have entered so if you want to change them you need to remove and re-add it. Another limitation was that one could not specify a max Length value.

[NGX-QUILL][2]

I ended up using [ngx-quill][2]. It has a better way to deal with links as well as the ability to specify max-Length. It was also very easy to install:

    npm install ngx-quill
    npm install quill  // Needed for CSS styles

    import { QuillModule } from &#39;ngx-quill&#39;
    import &#39;quill/dist/quill.core.css&#39;
    import &#39;quill/dist/quill.snow.css&#39;
    
    @NgModule({
      imports: [
        ...,
    
        QuillModule
      ],
      ...
    })
    class YourModule { ... }


  [1]: https://github.com/Sibiraj-S/ngx-editor
  [2]: https://github.com/KillerCodeMonkey/ngx-quill

You can use ng2-editor. It has many options to manage .

&gt; https://github.com/chymz/ng2-ckeditor

I use &quot;[ngx-quill][1]&quot; as a WYSIWYG Editor in my Angular4 project.

This is an Angular (&gt;=2) component for rich text editor Quill

    angular v4 - ngx-quill &lt;=1.6.0
    angular v5 - ngx-quill &gt; 1.6.0
    angular v6 - ngx-quill &gt;= 3.0.0

 - [demo-page][2]  
[tool bar image][3]


  [1]: https://www.npmjs.com/package/ngx-quill
  [2]: https://killercodemonkey.github.io/ngx-quill-example/
  [3]: https://i.stack.imgur.com/Kqtnw.png
  [4]: https://i.stack.imgur.com/o9gqb.png

I&#39;m trying to run DMelt programs (http://jwork.org/dmelt/) program using Java9 (JDK9), and it gives me errors such as:


    WARNING: An illegal reflective access operation has occurred
    WARNING: Illegal reflective access by org.python.core.PySystemState (file:/dmelt/jehep/lib/jython/jython.jar) to method java.io.Console.encoding()
    WARNING: Please consider reporting this to the maintainers of org.python.core.PySystemState
    WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
    WARNING: All illegal access operations will be denied in a future release

How can I fix it? I was trying to add –illegal-access=permit to the last line of the script &quot;dmelt.sh&quot; (I&#39;m using bash in Linux), but this did not solve this problem. I&#39;m very frustrating with this. I was using this program very often, for very long time. Maybe I should never move to JDK9



JDK9: An illegal reflective access operation has occurred. org.python.core.PySystemState

I need to integrate a new payment gateway to our corporate website, which is based on Social Engine. There is an extension for this `CMS` called Advanced Payment Gateways which allows integration of new gateways. In fact, it gets your gateway name and generates a skeleton structure zipped as a file so you can unzip and upload to your server and thus merge with the application directory. 

I&#39;m going to explain how I implement my gateway without Social Engine, and I hope someone can tell me how I can incorporate that into Social Engine.     

 1. First I connect to my `PSP` service: 

        $client = new nusoap_client(&#39;https://example.com/pgwchannel/services/pgw?wsdl&#39;);

 2. I prepare the following parameters in an array to send to `bpPayRequest`: 

    	$parameters = array(
    		&#39;terminalId&#39; =&gt; $terminalId,
    		&#39;userName&#39; =&gt; $userName,
    		&#39;userPassword&#39; =&gt; $userPassword,
    		&#39;orderId&#39; =&gt; $orderId,
    		&#39;amount&#39; =&gt; $amount,
    		&#39;localDate&#39; =&gt; $localDate,
    		&#39;localTime&#39; =&gt; $localTime,
    		&#39;additionalData&#39; =&gt; $additionalData,
    		&#39;callBackUrl&#39; =&gt; $callBackUrl,
    		&#39;payerId&#39; =&gt; $payerId);
    
    	// Call the SOAP method
    	$result = $client-&gt;call(&#39;bpPayRequest&#39;, $parameters, $namespace);

 3. If payment request is accepted, the result is a comma separated string, with the first element being **0**.   
Then we can send the second element (reference id) to payment
    gateway as follows via `POST` method:

    
        echo &quot;&lt;script language=&#39;javascript&#39; type=&#39;text/javascript&#39;&gt;postRefId(&#39;&quot; . $res[1] . &quot;&#39;);&lt;/script&gt;&quot;;
    
    	&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;    
    		function postRefId (refIdValue) {
    			var form = document.createElement(&quot;form&quot;);
    			form.setAttribute(&quot;method&quot;, &quot;POST&quot;);
    			form.setAttribute(&quot;action&quot;, &quot;https://example.com/pgwchannel/startpay&quot;);         
    			form.setAttribute(&quot;target&quot;, &quot;_self&quot;);
    			var hiddenField = document.createElement(&quot;input&quot;);              
    			hiddenField.setAttribute(&quot;name&quot;, &quot;RefId&quot;);
    			hiddenField.setAttribute(&quot;value&quot;, refIdValue);
    			form.appendChild(hiddenField);
    
    			document.body.appendChild(form);         
    			form.submit();
    			document.body.removeChild(form);
    		}
    		&lt;/script&gt;

 4. The gateway will return the following parameters via `POST` method to the call back `URL` that we provided in payment request:  
`RefId` (reference id as produced in previous steps)  
`ResCode` (Result of payment: 0 denotes success)  
`saleOrderId` (order id as passed during payment request)  
`SaleReferenceId` (sale reference code is given by PSP to the merchant)  

 5. If `ResCode` in the previous step was **0**, then we&#39;d need to pass the call `bpVerifyRequest` with the following parameters to verify payment, otherwise the payment will be canceled.    

         $parameters = array(
    		&#39;terminalId&#39; =&gt; $terminalId,
    		&#39;userName&#39; =&gt; $userName,
    		&#39;userPassword&#39; =&gt; $userPassword,
    		&#39;orderId&#39; =&gt; $orderId,
    		&#39;saleOrderId&#39; =&gt; $verifySaleOrderId,
    		&#39;saleReferenceId&#39; =&gt; $verifySaleReferenceId);
    
    	// Call the SOAP method
    	$result = $client-&gt;call(&#39;bpVerifyRequest&#39;, $parameters, $namespace);

 6. In case the result of `bpVerifyRequest` is zero, payment is certain and the merchant has to provide goods or services purchased. However, there is an optional method `bpSettleRequest`, which is used to request a settlement. It is called as follows:   
```
	$parameters = array(
		&#39;terminalId&#39; =&gt; $terminalId,
		&#39;userName&#39; =&gt; $userName,
		&#39;userPassword&#39; =&gt; $userPassword,
		&#39;orderId&#39; =&gt; $orderId,
		&#39;saleOrderId&#39; =&gt; $settleSaleOrderId,
		&#39;saleReferenceId&#39; =&gt; $settleSaleReferenceId);

	// Call the SOAP method
	$result = $client-&gt;call(&#39;bpSettleRequest&#39;, $parameters, $namespace);
```

I get confused by looking at default gateways in the Payment Gateways plugin e.g. PayPal, Stripe, 2Checkout, etc.  How am I incorporate this code logic into the newly created gateway skeleton? (the structure is shown below):  
[![enter image description here][1]][1]

You can check out the complete source code here:  
[default.php](https://gist.github.com/anonymous/02dcf681b3cd0852a18fb7723e34447f)    
[callback.php](https://gist.github.com/anonymous/19a5b759f767cef6cd40158b9a3f0577)



  [1]: https://i.stack.imgur.com/PZyCe.png


How to add a custom payment gateway to Social Engine

Does someone knows a good free wysiwyg editor compatible with angular 4 ?

Froala seems to be good but unfortunately it&#39;s not free.

Maybe using angular 4 was not a good idea because it&#39;s hard to find a lot of basic things ...

Thank you

Wysiwyg editor for angular4

Does someone knows a good free wysiwyg editor compatible with angular 4 ?
Froala seems to be good but unfortunately it's not free.
Maybe using angular 4 was not a good idea because it's hard to find a lot of basic things ...
Thank you

Im using this:
```js
    import { HttpParams } from &#39;@angular/common/http&#39;;
    let params = new HttpParams();
    params.append(&#39;newOrdNum&#39;,&#39;123&#39;);
```
But this is not working, i dont append param in url. Any suggestion?

Angular: append query parameters to URL

I need to iterate over the array of objects in angular 2 and limit the string length display for a particular key in the object.

     this.productService.loadAllProducts(product).subscribe(data =&gt; {
      if (this.authService.checkActiveSession(data)) {
        if (data.success) {
         //console.log(this.product_desc.substring(0,2))
             for(let i=0;i&lt;data.products.length ;i++){  //How to properly iterate here!!
             console.log(data.products[0].product_desc)
          }
          this.source.load(data.products);
         } else {
          console.log(&#39;Not binded&#39;);
        }
      }
   });
  }

I need to limit the prod_desc length to (say) 10 characters while displaing for which i have used:

Eg:

    this.product_desc.substring(0,10)




Iterate over array of objects in Typescript

My team and I have received funding to start developing an Enterprise level web application (won&#39;t go into details of what it does).  The application will have many separate web pages but two of those pages being more focused and very heavy - heavy as in a lot of user interaction, modals that display mass data, websocket connections, chat, etc.

I have been assigned to Chief Architect on the project, so I am doing some research into the latest web frameworks.  For the back end, we have done some testing and have decided to go with the Azure SQL platform.  So far, I am liking the improvements that have been made, and are being made, to ASP.NET with Core 2.0.  Specifically the Razor engine, over previous versions of ASP.NET MVC.

I wanted to get some expert opinions on the &quot;new&quot; Razor vs. Angular/React and the like.  I&#39;m particularly more concerned with performance.  How does Core 2.0 Razor hold up to client side rendering frameworks?  Are the differences negligible?  Our app is targeting a potential 1,000,000 users (roughly 100,000 concurrent).

Thanks in advance!

ASP.NET Core 2.0 Razor vs Angular/React/etc

What do these three dots mean exactly, and why do I need them?

    export function leadReducer(state: Lead[]= [], action: Action {
        switch(action.type){
            case ADD_LEAD:
                return [...state, action.payload];
            case REMOVE_LEAD:
                return state.filter(lead =&gt; lead.id !== action.payload.id )
    }
    }

Angular what&#39;s the meaning of these three dots in @NGRX

I am trying to run a simple application. I have an Express backend which returns a JSON string when visited at `localhost:4201/ticker`. When I run the server and make a request to this link from my Angular Service over `http`, I get the following error:

&gt; XMLHttpRequest cannot load localhost:4201/ticker. Cross origin
&gt; requests are only supported for protocol schemes: http, data, chrome,
&gt; chrome-extension, https.

I read the following article: [Understanding and Using CORS][1] and as stated, used the `cors` module with my express server. However, I am still getting the error as given above. Part of code is given below:

Server code:

    private constructor(baseUrl: string, port: number) {
        this._baseUrl = baseUrl;
        this._port = port;
        this._express = Express();
        this._express.use(Cors());
        this._handlers = {};
        this._hInstance = new Handlers();
        this.initHandlers();
        this.initExpress();
    }
    private initHandlers(): void {
        // define all the routes here and map to handlers
        this._handlers[&#39;ticker&#39;] = this._hInstance.ticker;
    }
    private initExpress(): void {
        Object.keys(this._handlers)
            .forEach((key) =&gt; {
                this._express.route(this._url(key))
                    .get(this._handlers[key]);
            });
    }
    private _url(k: string): string {
        return &#39;/&#39; + k;
    }

Here is the handler function:

    ticker(req: Request, res: Response): void {
        Handlers._poloniex
            .getTicker()
            .then((d) =&gt; {
                return Filters.tickerFilter(d, Handlers._poloniex.getBases());
            })
            .then((fdata) =&gt; {
                
                //res.header(&#39;Access-Control-Allow-Origin&#39;, &quot;*&quot;);
                //res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;Origin, X-Requested-With, Content-Type, Accept&quot;);
                res.header(&#39;Content-Type&#39;, &#39;application/json&#39;);
                res.send(JSON.stringify(fdata));
            })
            .catch((err) =&gt; {
               this._logger.log([
                    &#39;Error: &#39; + err.toString(),
                    &#39;File: &#39; + &#39;handlers.class.ts&#39;,
                    &#39;Method: &#39; + &#39;ticker&#39;
                ], true);
            });   
    }

Here is my Angular Service:

    export class LiveTickerService {
  
      private _baseUrl: string;
      private _endpoints: {[key:string]: string};

      constructor(
        private _http: Http
      ) {
        this._baseUrl = &#39;localhost:4201/&#39;;
         this._endpoints = {
           &#39;ticker&#39;: &#39;ticker&#39;
         };
       }

      getTickerData(): Observable&lt;Response&gt; {
        return this._http.get(this._baseUrl + this._endpoints[&#39;ticker&#39;])
          .map(resp =&gt; resp.json())
      }

    }

Here is how I am using my Service:

    getTicker() {
      let a = new Array&lt;{[key: string]: any}&gt;();
      this._tickerService.getTickerData()
         .subscribe(
            data =&gt; {
              let parsed = JSON.parse(JSON.stringify(data));
              Object.keys(parsed)
                .forEach((k) =&gt; {
                  a.push({k: parsed[k]});
                });
             this.data = a;
            },
            error =&gt; console.log(error.toString()),
            () =&gt; console.log(&#39;Finished fetching ticker data&#39;)
          );
      return this.data;
    }

        


  [1]: http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

Content Type	Original Author	Original Content on Stackoverflow
Question	error	View Question on Stackoverflow
Solution 1 - Angular	Ronin	View Answer on Stackoverflow
Solution 2 - Angular	Andrey K.	View Answer on Stackoverflow
Solution 3 - Angular	velval	View Answer on Stackoverflow
Solution 4 - Angular	Aman Jain	View Answer on Stackoverflow
Solution 5 - Angular	Fibi	View Answer on Stackoverflow

Wysiwyg editor for angular4

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

ng2-ckeditor

ngx-editor

quill.js for angular

PRIME NG

ngx-md

Solution 2 - Angular

AngularEditor

Solution 3 - Angular

Solution 4 - Angular

Solution 5 - Angular

How to add a custom payment gateway to Social Engine

JDK9: An illegal reflective access operation has occurred. org.python.core.PySystemState

Attributions