Editor + Angular4

4 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

    *app.module.ts*

    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';

    @NgModule({
    declarations: [
    AppComponent,
    FilterPipe
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

    *app.component.ts*

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

    declare var kendo: any;

    @Component({
    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() {
    kendo
    .jQuery(this.htmlEditor.nativeElement)
    .kendoEditor({
    resizable: {
    content: true,
    toolbar: true
    }
    });
    }
    }

    *app.component.html*

    <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;
    &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;
    &lt;p&gt;Features include:&lt;/p&gt;
    &lt;ul&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;
    &lt;/ul&gt;
    &lt;p&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;!
    &lt;/p&gt;
    </textarea>

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

    </div>

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    899 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:

    https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/#toc-initial-setup

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

    https://www.telerik.com/kendo-angular-ui/getting-started/#toc-adding-the-styles

    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.

    Regards,
    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.
  3. Rajasekhar
    Rajasekhar avatar
    1 posts
    Member since:
    Apr 2014

    Posted 07 Mar in reply to Dimiter Topalov Link to this post

    I am trying tom implement same in modal popup but i am not getting issue with native element
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    899 posts

    Posted 08 Mar Link to this post

    Hi Rajasekhar,

    Can you please specify whether you are getting (or not getting as suggested in the post - "...but i am not getting issue with native element...") as well as what exactly the scenario and the custom setup are? Is this modal popup a Kendo UI for Angular Popup (or perhaps a Dialog) component?

    What are the exact observed problems (assuming that there are such)?

    To help us provide the most suitable suggestion for the specific scenario, please send us an isolated runnable project where the issue(s) can be observed, so we can inspect them further and determine what might be causing them. Thank you in advance.

    Regards,
    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