I see that in Kendo UI for JQuery it is present, but for Angular 2+ there is no such functionality in the example.
There is no way to change size for columns,rows and table for table.
1) Go to https://www.telerik.com/kendo-angular-ui/components/editor/tools/
2) Add table to editor
3) Click on table
4) No way to change size
The use case that we would like to cover is as follows.
1. Open an image in Paint.
2. Select a region and copy it.
3. Paste into the editor.
4. The image should be displayed in the editor.
It should, however, be encoded similar to the way that Kendo Grid for jQuery does to produce something like this.
<img src="data:image/png;base64,iVBORw0KGgoAAA...vwAAAABJRU5ErkJggg==" />
Note that the image is not hosted remotely at some URL, but rather is included inline within the body.
Sometime but not always, the Editor will start to set the style attribute for each and every element, even though they are all the same.
Example Html:
<p>
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Bedroom One</span>
<br style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Wrap, box and move non-affected contents and small furniture away from the affected area.</span>
<br style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<span style="color: rgb(53, 53, 53); font-family: "Open Sans", tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Carryout inventory and dispose of non-restorable contents and furniture.</span>
</p>
How can I avoid this duplication?
This is my current configuration for the Kendo Editor:
<kendo-editor ctsStyle
[style.height]="to.height"
[formControl]="formControl"
[class.is-valid]="showError"
[formlyAttributes]="field"
>
<kendo-toolbar [overflow]="true">
<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>
<kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
<kendo-toolbar-buttongroup>
<kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
<kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
</kendo-toolbar-buttongroup>
</kendo-toolbar>
</kendo-editor>
I would like to have the possibility to modify the pasted content before it is inserted by providing a callback function. This function would be called with the content after Kendo's internal cleanup and the cleanup I specified through the other options has run.
It would look like this:
@Component({
selector: 'my-app',
template: `
<kendo-editor [pasteCleanupSettings]="pasteCleanupSettings"></kendo-editor>
`
})
export class AppComponent {
public pasteCleanupSettings = {
// other options...
custom: (input: string) => {
return '<h1>I can do anything I want in here</h1>' + input;
}
}
}Basically I want the same behavior as the jQuery editor provides through pasteCleanup.custom: https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/configuration/pastecleanup#pastecleanupcustom
When a list item is aligned to the center or the right, the list item marker remains aligned to the left instead of following the text. (A similar issue occurs when the document direction is RTL.)
Please introduce a feature that ensures the marker follows the item in accordance with its alignment similar to MS Word or Google Docs behavior.
Hi Team,
It will be a good addition to the Editor component if the following functionality options are added related to document processing(MS Word for as an example):
- PageView of the rich text documents.
- Header & Footer.
- Document breaks.
- Document layout.
- Margin
- Ruler.
- Tables inside the document to support:
*Table formatting. Silverlight version supports using format names to change the entire appearance of a table.
*Merge/Split cells
*Size to contents
Thank you.
Hello,
It would be very nice to have dedicated PDF Export functionality for the Editor. Some of the features that would be included with this would be:
- Built-in exporting of html within the editor, keeping the content consistent with the size of PDF. Currently, tables within the editor are only able to be exported via a workaround where CSS styles have to be applied outside of the editor. (Also, entering data into tables on the editor is very inconsistent - after a few characters, the cursor jumps to the last cell.
- Pagination Support: Header/Footer, page numbers, page breaks. Currently, header and footer functionality is not possible within the editor/PDF export combo (unless there is another workaround possible). Also, depending on what scale is set for the PDF Export component, content will often run off the side of the page on the exported PDF. It would also be useful to have physical page breaks represented somehow on the editor, either through multiple pages or a line separating them. Unless you manually place the page breaks on certain elements within the editor content, there is no way to see when they will appear.
These features are crucial to our project and would be very much appreciated.
Thanks,
Aidan
Provide an option to drag the bottom right corner of the Editor in order to change the height of the Editor manually as the Kendo jQuery Editor.
I want to get selected text from the Kendo Angular editor and I see no function similar to what we have in Kendo AngularJs Editor like GetRange, GetSelection
Steps to reproduce:
- Go to https://www.telerik.com/kendo-angular-ui/components/editor/tools/
- Choose any font-size parameter in the "Select font size" dropdown
- Open the dropdown again
Actual result: current value doesn't have selected styles in the dropdown
Expected result: current value in the dropdown is highlighted. Please see an example below:
Sample code:
<div class="form-group">
<kendo-editor *ngIf="!formDisabled" [(ngModel)]="securityplan.dataFlow" id="dataFlow" name="dataFlow" style="height: 250px; width: 100%;">.
</kendo-editor>
</div>When you click into the body of the editor, "before emit" is console logged.
Currently, the kendoEditorCreateLinkButton does not provide a way to specify the Dialog container, as the following article demonstrates:
Please consider providing a built-in appendTo option to the link button directive. This will help to determine where the Dialog will be appended when the Editor is used within a kendoGridEditTemplate/kendoGridCellTemplate:
Using kendoGridEditTemplate:
https://stackblitz.com/edit/angular-yddl1n-inbwen
Using kendoGridCellTemplate:
https://stackblitz.com/edit/angular-yddl1n-t3afde
Limitation:
- Font size in Kendo Editor only supports PX (pixel) values.
- To customize the font size to show in PT (point) format in Editor, manual conversion has to be done using the below formula. However, the font size is not exactly the same as Microsoft word PT measurement.
- 1 Point [pt] = ~ 1.33 Pixel [px]
Feedback: Font size dropdown can be provided for PT (Point) option as well as to follow like the Microsoft Word font size.