Editor + Angular4

[Anil]

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>

[Dimiter Topalov]

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

[Rajasekhar]

I am trying tom implement same in modal popup but i am not getting issue with native element

[Dimiter Topalov]

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