Hello,

I am working on implementing  the Angular Editor: https://www.telerik.com/kendo-angular-ui/components/editor

One of the requirements is that when links are pasted, they turn into hyperlinks.

I was unable to find any info on how to implement this in the Forums or elsewhere.

I checked the jQuery editor https://www.telerik.com/kendo-jquery-ui/documentation/controls/editor/pasting and that one had it built in.

Any ideas on how this can be implemented?

Photo below shows missing behavior:

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Hello,

Is batch editing available in Kendo UI for Angular? If so, could you provide guidance or resources on how to implement it?

There is a bug in the Angular Kendo Editor, whereby it treats any semicolon in the style attribute as a CSS property delimiter. However, not all semicolons are CSS property delimiters, as I will show in an example below.

Version:    "@progress/kendo-angular-editor": "16.8.0".

Set the value property of <kendo-editor>  to the below value: 

<p  style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo)"> </p>

When you load the editor, you will get the following error:

TypeError: Cannot read properties of undefined (reading 'trim')
    at http://localhost:9090/dev-build/vendor.js:81983:45
    at Array.forEach (<anonymous>)
    at applyStyle (http://localhost:9090/dev-build/vendor.js:81981:98)
    at http://localhost:9090/dev-build/vendor.js:81989:5
    at Array.forEach (<anonymous>)
    at restoreStyleAttr (http://localhost:9090/dev-build/vendor.js:81986:65)
    at htmlToFragment (http://localhost:9090/dev-build/vendor.js:82001:3)
    at parseContent (http://localhost:9090/dev-build/vendor.js:82041:15)
    at EditorComponent.initialize (http://localhost:9090/dev-build/vendor.js:324747:100)
    at Object.next (http://localhost:9090/dev-build/vendor.js:324378:155)

The error seems to be occurring in the file

./node_modules/@progress/kendo-drawing/dist/es2015/svg/utils/render-svg.js

Below is the problematic code. It assumes that any semicolon is a CSS property delimiter, but this is not true, as in the example above,

where the semicolon is part of the CSS value.

const applyStyle = (styleString, element) => styleString.split(';').filter(s => s !== '').forEach(s => {
  const parts = s.split(':');
  element.style[parts[0].trim()] = parts[1].trim();
});

Hello,

I have come across an issue that I was able to replicate in a stackblitz. When using dynamic columns to display a Kendo Grid's data, specifically when the grid only contains one row, the editTemplate unexpectedly reverts to a standard input field. This behavior does not occur when the grid has multiple rows.

In my example stackblitz below, I have a dropdownlist as the edit template for the column Product Type. Upon clicking it, (sometimes a double click) it turns into a input.

To repeat:
1) add product type in multi select above grid to display row
2) Click Dropdown
3) Dropdown becomes input

I'd appreciate any help, I've tried a few things like event.preventDefault and other ways to try and stop this behavior, but I cannot figure out a way. Again, it only happens when there is one row.

Thanks in advance!

Kendo UI for Angular Example Application (stackblitz.io)

https://stackblitz.com/edit/angular-ppvmbg?file=src%2Fapp%2Fapp.module.ts

Hi,

I've added an editor as following

<kendo-editor formControlName="note" [iframe]="false"></kendo-editor>

I'm trying to interact with it while testing with Cypress but no luck, i.e the following doesn't work

const input = cy.get('kendo-editor[formcontrolname=note]');
input.type('sample text');

the error is

Timed out retrying after 4000ms: cy.type() failed because this element:

<kendo-editor _ngcontent-yle-c1049="" formcontrolname="note" style="height: 180px;" _nghost-yle-c961="" ng-reflect-name="note" ng-reflect-iframe="false" dir="ltr" ariadisabled="true" class="k-editor k-state-disabled ng-untouched ng-pristine">...</kendo-editor>

has CSS pointer-events: none

pointer-events: none prevents user mouse interaction.

Could you please provide some hints on how to do this? Do we have guidelines/howtos for Cypress e2e testing of Kendo UI for Angular?

Thanks

Regardless of whether I set iframe = true or false, or switch my ViewEncapsulation strategy I cannot generate html from the editor which contains borders around table cells.   This means that table content is rendered with just whitespace around it.

Is this a bug?  How can I apply table css and have it appear in the editor's html output?

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node. 

Please see my ScreenPal for demonstration of the issue.  

https://somup.com/cZnhrjpi34

Thank you for your help.