Bug report

Using Edge/Chrome, upon pasting underline text in the Kendo UI Editor, the content is rendered underline, but the UI doesn't highlight the button. In turn, if the user toggles the underline style for parts of the text, it doesn't work. At this point, the button is now highlighted for the part, but switching back to no underline style doesn't have any effect regarding the rendering. Removing the style for the whole line does work as expected.

Reproduction of the problem

1. Open Editor demo and enter some text, containing an underline.

2. Copy the entered text and reload page
3. Paste content at the start of the document. The text is not recognized as underline text

4. Select part of the text and toggle underline. Part of the text is recognized as underlined text now.

Expected/desired behavior

The underlined text decoration should be recognized by the UI and display.

Additional Notes

As a comparison, here is the content after paste:

Edge/Chrome

<p><span style="text-decoration-line:underline;">some text with underline</span></p>

FireFox - which is working

<p><span style="text-decoration:underline;">some text with underline</span></p>

Environment

• Kendo UI version: 2023.1.314
• jQuery version: All supported versions
• Browser: Chrome 111.0.5563.111 | Edge 111.0.1661.54

When we add a header in table using accessibility tab then we need that header should get wrap in <thead> and same for footer and rest of the rows will wrap in <tbody>. For details please go through video:
https://supportheroes.telerik.com/clientsfiles/d6c4fcb8-de14-4966-9bb4-bb0ff104b136_table-header-requirement-from-kendo-edited-mp4.zip

Steps to reproduce:

1. Navigate to this demo:
https://demos.telerik.com/kendo-ui/editor/index

2. Clean the contents

3. Create a table and click inside one of the cells

4. Open the Table Manager and open the Accessibility tab

5. Add 1 header row and click Ok:

The <th> cells go inside the <tbody> instead of <thead>:

It would be nice to have a boolean property with the Editor to detect an enter keypress, and end the current style.  We have custom css classes that the user "can't get out of" without going into the html view.  Another option would be a tool that would "end formatting" so that further content would be unformatted.

This problem can be seen at one of the demos, http://demos.telerik.com/kendo-ui/web/editor/styles.html.  Go to the end of the content, type something, choose the "highlight" style, hit enter.  The style is permanent until you use the arrow key down or click below the current content.

Bug report

When the serialization.semantic is set to false and the user uses the viewHtml tool and press 'Update' then after chaning the font-size, the style attribute is added to the element instead of the font attribute.

Reproduction of the problem

1. Open the Dojo - https://dojo.telerik.com/@NeliKondova/iVICefOb
2. Add some text and change its font. If you inspect the content at this stage, the font size will be applied using the font attribute: <font size="4">хххх</font>
3. Press 'Update' button in the viewHtml dialog.
4. Press 'Enter' to add paragraph.
5. Change the font size and enter some text.
6. Inspect the content or open the ViewHtml.

Current behavior

The font-size after pressing the 'Update' button is applied using the style attribute

    <p>aaaaaa</p>
    <p><font size="1">bbbbbbb</font></p>
    <p><font style="font-size: small;">ccccccc</font></p>

screencast - https://screenpal.com/watch/cZVvQtVJ8oz

Expected/desired behavior

When the semantic mode is set to false and the 'Update' button in the viewHtml tool is clicked the font size should be applied as initially - using the font attribute.

Environment

• Kendo UI version: 2023.3.1114
• Browser: [all ]

Bug report

Reproduction of the problem

Dojo example.

1. In the Editor's content click the line above the "Climate" word
2. Press and hold down Space key, while holding it down click the left mouse button and hold it down as well, then hover the table and move the mouse cursor over it.

For more details see Ticket ID: 1478828

Current behavior

A js exception is thrown:
kendo.all.js:78925 Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset 3.

Expected/desired behavior

No exceptions.

Environment

• Kendo UI version: 2020.2.617
• jQuery version: x.y
• Browser: [ Chrome XX ]

Bug report

Ordered List breaks when you paste a table

Reproduction of the problem

Open the Demo - https://dojo.telerik.com/AtuKOTEK

Copy an Excel table and paste it inside the list items

Expected/desired behavior

Environment
Kendo UI version: [all]
Browser: [all ]

Bug report

If you remove an image in the Editor and then return it with undo action, the image resize handlers will be duplicated.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/onIsuKuP/4
2. Select and remove the image using Del key.
3. Undo with Ctrl + Z
4. Select the image and resize it.

Current behavior

The resize handlers are duplicated.

Expected/desired behavior

The resize handlers shouldn't be duplicated.

Environment

• Kendo UI version: 2022.2.621
• Browser: [all]

Bug report

When an image from docx file is pasted in the Editor an error is thrown.

Reproduction of the problem

1. Open the Dojo
2. Open the file test_word_images.docx
3. Copy the first image and paste it in the Editor

Current behavior

An error is thrown : "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'"
screencast

Expected/desired behavior

There should be no errors in the console.

Environment

• Kendo UI version: 2022.2.621
• Browser: [all ]

Hi Team,

I'd like to request the functionality to retain the new lines for a <pre> element within a Kendo UI Editor using classic mode(<textarea>).  Currently, it does have allow a new space within the pre element:

Editor

        <textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
          <pre>
            Example
            Example
          </pre>
        </textarea>

JavaScript

        $(document).ready(function () {
            // create Editor from textarea HTML element with default set of tools
            $("#editor").kendoEditor({
                resizable: {
                    content: true,
                    toolbar: true
                }
            });
        });

Please take a look at this Progress Kendo UI Dojo using the code above.

Thank you!

Hi Team,

I would like to ask for the functionality to modify the Table Wizard's default values using the Kendo UI Editor's API or an associated Table Wizard API.  

Thank you!

Hi Team,

I would like to request the ability to set a specific section of text where it is not removable.  Currently, if the text is readonly by setting contenteditable to false, you can highlight it and delete it.  I'd like to make it completely unmodifiable.  

Thank you!

Hi Team,

I'd like to request the Kendo UI Editor to be able to resize when an image within it is resized larger than the space contained in the Editor body.  Please allow this functionality for both the classic and inline editors.

Thank you!

When using the image browser widget inside the Editor widget, there is a possibility to add extra headers to support the antiforgerytoken.
But inside the image browser, the upload widget is used, and there is no configuration possibility to add a header.
A way around is to intercept the upload call via javascript and to bind to the XMLHttpRequest object. With this we can add a header. But this doesn't work for example in IE9, because no XMLHttpRequest support.

        <textarea kendo-editor="editorWidget" k-ng-model="data.processModelHtml"
                  k-resizable="true"
                  k-tools="['bold','italic','underline','strikethrough','justifyLeft','justifyCenter','justifyRight','justifyFull','insertUnorderedList','insertOrderedList','indent','outdent','createLink','unlink','insertImage','subscript','superscript','createTable','addRowAbove','addRowBelow','addColumnLeft','addColumnRight','deleteRow','deleteColumn','viewHtml','formatting','cleanFormatting','fontName','fontSize','foreColor','backColor','print']"
                  k-image-browser="{ messages: { dropfileshere: 'Drop files here' }, transport: { read: { url:'api/imageapi/getimages', dataType: 'json', headers: { 'RequestVerificationToken': '@Html.RequestVerificationToken()' } }, destroy: { url: 'api/imageapi/deleteimage' , type: 'DELETE', dataType: 'json', headers: { 'RequestVerificationToken' : '@Html.RequestVerificationToken()' } }, create: { url: 'api/imageapi/addimagefolder', type: 'POST', dataType: 'json', headers: { 'RequestVerificationToken' : '@Html.RequestVerificationToken()' } }, thumbnailUrl: 'api/imageapi/getthumbnailimage', uploadUrl: 'api/imageapi/addimage', imageUrl: 'api/imageapi/getimage?path={0}' } }"></textarea>

==> not only uploadUrl parameter, but the same configuration mechanisme like for the transport read, delete, ...

Regards,

My client is working with a huge library of images and they requested a feature where they can arrange by the latest image upload.
Currently the Insert Image window allows me to arrange by name and size only.

Hi,

Bullets are not removed when content is deleted.

1. Create text editor on a div
2. Input some text
3. Make it bold and underline
4. Make it bulleted
5. Add few more bullets
6. Select all bullets
7. Press backspace

Observe that two bullet points remain

Sometimes it might be useful to move some tools to a new line inside the toolbox. This creates the possibility of having a better static arrangement of the tools.

Hi Team,

I'd like to request an easy way with the API to insert/remove MergeFields into a document using the Kendo UI Editor.  

Thank you!

It would be very useful to extend the functionality of the hyperlink feature of the editor to enable same page links.

Our clients used this extensively in our previous editor and are complaining now that we have switched to the Kendo editor that this functionality is not available through the interface.