Clear formatting is not working properly , as it removed the span tag and other attributes of the html tags.
For example :
HTML content - before applying the clear formatting:
<p style="line-height: normal;"><strong><em><span style="font-family:Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif; font-size:11px;" class="ABS_Comments" id="ABS_Comments" name="ABS_Comments">{ABS_Comments}</span></em></strong></p>
HTML Content - after applying the clear formatting :
<p style="line-height: normal;">{ABS_Comments}</p>
It suppose to remove the only the formatting tags instead span and actual tags.
When applying font-size, the bullet list dots aren't affected by yhe changes as the MS Word behave:
MS Word
Hi, Team!
I would like to request the possibility of inserting various shapes in the Editor component similar to the functionality in Microsoft Word.
Here is a possible workaround: https://stackblitz.com/edit/angular-lx34zzvp-qhvevap1
It would be great to have support for collaborative editing in the Editor. This could include a helper function to facilitate collaboration, similar to ProseMirror’s or Yjs’ implementations. This would enhance real-time collaborative capabilities for users, allowing smoother shared editing experiences.
Examples:
Hello,
Please repeat the following steps to reproduce this issue:
- Go to https://www.telerik.com/kendo-angular-ui/components/editor#angular-editor-example
- In the Angular Editor Example click on the first line of the first paragraph (let's say on the word Kendo)
- Navigate to toolbar via Shift+Tab key
- Use the arrow key to navigate to Format dropdownlist
- Use Enter to open the dropdownlist with the available formats (Paragraph, Heading 1, Heading 2, etc)
- Choose e.g. "Heading 1" with Enter
- Press Tab to focus the editor content (You can type some letters to ensure that the editor content is focused)
- Press Shift+Tab to go back to toolbar
- Press an arrow key (Left or Right) to try to navigate through the toolbar => Bug
Expected behaviour: It's possible to navigate through the toolbar items like in step 4
Experienced behaviour: You can not navigate through the toolbar items with arrow left or arrow right.
Important: After choosing an item from the dropdown, the kendo-dropdownlist has still an tabindex="0", what is also wrong.
I observed this bug in our application but it's possible to reproduce it with your example, too.
Kind regards,
Roman
We are planning on using Angular 8 and Kendo UI for Angular for a major refactor project that currently utilizes RadRichTextBox for Silverlight.
We would like to utilize the Kendo UI for Angular Editor component.
The feature set our business users require and that is in RadRichTextBox we are currently using are:
- API to allow injecting contents into the current document in the editor at certain places by using bookmarks.
- The ability to save and load a saved file into the editor.
- Page Header and Footer
- Page Break
- Mail Merge
- Drag and Drop Content from List
- Printing/Print Preview
- Import/Export
We understand that some of these features are not currently implemented in the new component.
The roadmap on the Telerik website shows that additional functionalities are scheduled to be added to Kendo UI for Angular by September 18, 2019. Our question is if any of these things are planned to be added to Kendo UI for Angular and if so when? Or if there is another route involving Telerik you might suggest for incorporating these functionalities into an Angular 8+ project?
Thanks
-Nhan
When i refresh page wich contains Editor i give error - Cannot read property 'createElement' of null wheb i refresh page
i try hide edtor while not initilized, content initilized, this dont help
Please could you provide a built-in option ot insert alpha ordered list.
if editor recive a value like '<span class="platzhalter">Empfaenger_Debitor</span>'
by rendering console show this error
core.js:15724 ERROR TypeError: Cannot read property 'split' of nullat utils.js:181
at Array.map (<anonymous>)
at getUniqueStyleValues (utils.js:200)
at SafeSubscriber._next (index.js:1810)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:38)
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
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.
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:
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.
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>
Hi team,
Zoom in /out options are required to view the content of the editor.
Regards,
Babu
I would love to create some predefined values, and when the user selects the value from the dropdown, it will insert it in the cursor position.
This will give us the ability to define some placeholders in the text.