Editor + Angular4

2 posts, 0 answers
  1. Anil
    Anil avatar
    1 posts
    Member since:
    Nov 2017

    Posted 05 Feb Link to this post

    Hi i am using kendo jquery editor in my angular 4 application, but output is not as expected. following is my code and output file screenshot is attached below


    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FilterPipe} from './filter.pipe';
    import { Pipe, PipeTransform } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import {HttpModule} from '@angular/http';
    import '@progress/kendo-ui';

    import { AppComponent } from './app.component';

    declarations: [
    imports: [
    providers: [],
    bootstrap: [AppComponent]
    export class AppModule { }


    import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

    declare var kendo: any;

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    export class AppComponent implements OnInit, AfterViewInit{

    @ViewChild('editor') htmlEditor: ElementRef;
    encodedStr: any;

    ngOnInit() {}

    ngAfterViewInit() {
    resizable: {
    content: true,
    toolbar: true


    <div id="example">
    <textarea #editor rows="10" cols="30" style="height:440px;widhth 100%" aria-label="editor" >
    &lt;p&gt;&lt;img src=&quot;../content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
    Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
    In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
    and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
    accessibility standards and provides API for content manipulation.
    &lt;p&gt;Features include:&lt;/p&gt;
    &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
    &lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
    &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
    &lt;li&gt;Cross-browser support&lt;/li&gt;
    &lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
    &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
    Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
    &lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!

    <button (click)="getData(editor.value)">GetData</button>


  2. Dimiter Topalov
    Dimiter Topalov avatar
    710 posts

    Posted 06 Feb Link to this post

    Hello Anil,

    The provided setup seems correct, but the screenshot suggests that our styling (s.g. kendo-theme-default) is not loaded. You can check out the following integration guide, more specifically the second point of the suggested setup:


    Further details about installing the default theme are available in the Getting started guide:


    Here is the result the provided sample setup yields on my end in a test application:

    I hope adding the Kendo UI styling will resolve the described problem on your end too.

    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top