Unplanned
Last Updated: 28 Sep 2022 11:47 by Fares

When I add table to Editor, dispose the component and initialize it again with the same content, the table cells appear taller. It looks like an additional <br class="ProseMirror-trailingBreak"> appears in every cell.

Reproduction: https://blazorrepl.telerik.com/cwaqcSuV12myl9ok47.

Steps to reproduce:

  1. Add a table
  2. Toggle the Editor
  3. Cells appear taller
Completed
Last Updated: 19 Sep 2022 10:02 by ADMIN
Release 3.7.0 (26 Oct 2022)
Created by: Stewart
Comments: 5
Category: Editor
Type: Bug Report
3

Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty

Unplanned
Last Updated: 15 Sep 2022 07:50 by ADMIN
I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?
Unplanned
Last Updated: 16 Aug 2022 12:30 by Joe
The bottom border of the tabstrip item is not hidden as expected when the component is hosted in a Modal window.
Unplanned
Last Updated: 04 Aug 2022 21:58 by Tom

Hello,

Please allow standard form elements in the Editor content:

  • <button> tags
  • <input> tags (textboxes, checkboxes, buttons, radio buttons)
  • <textarea> tags
Unplanned
Last Updated: 03 Aug 2022 15:33 by ADMIN
Created by: Tejinder
Comments: 1
Category: Editor
Type: Feature Request
2

I couldn't find the Preview Tool button in the Editor.

Please help me with that, how can I add that functionality into the Editor?

Unplanned
Last Updated: 28 Jul 2022 07:48 by Patrik Madliak
Created by: Patrik Madliak
Comments: 0
Category: Editor
Type: Bug Report
1

The Editor is missing some CSS styles when the EditMode is Div. As a result, the table resizers are misplaced and table cell borders are missing.

The workaround is to add those styles explicitly, until the issue is fixed.

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@ToolCollection"
               EditMode="@EditorEditMode.Div" />

<style>
.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}
div.ProseMirror {
  position: relative;
  min-height: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}
div.ProseMirror:focus {
  outline: none;
}
.ProseMirror pre {
  white-space: pre-wrap;
}
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror li {
  position: relative;
}
li.ProseMirror-selectednode {
  outline: none;
}
li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.k-editor-resize-handles-wrapper {
  position: absolute;
  visibility: hidden;
}
.k-editor-resize-handle {
  position: absolute;
  visibility: visible;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 100;
  width: 5px;
  height: 5px;
}
.k-editor-resize-handle.northwest {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.k-editor-resize-handle.north {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: n-resize;
}
.k-editor-resize-handle.northeast {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.k-editor-resize-handle.southwest {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.k-editor-resize-handle.south {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: s-resize;
}
.k-editor-resize-handle.southeast {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: se-resize;
}
.k-editor-resize-handle.west {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: w-resize;
}
.k-editor-resize-handle.east {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: e-resize;
}
.ProseMirror .tableWrapper {
  overflow-x: auto;
  margin: 1em 0;
}
.k-editor-resize-wrap-element {
  display: inline-block;
  position: relative;
}
.ProseMirror .row-resize-handle {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  transform: translate(0, 50%);
  height: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor-vertical {
  cursor: sn-resize;
  cursor: row-resize;
}
.k-editor-resize-wrap-element table td p,
.k-editor-resize-wrap-element table th p {
  margin: 0 auto;
}
.ProseMirror table {
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.ProseMirror td, .ProseMirror th {
  min-width: 1em;
  border: 1px solid #ddd;
  padding: 3px 5px;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}
.ProseMirror th {
  font-weight: bold;
  text-align: left;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px; top: 0; bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
/* Give selected cells a blue overlay */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: "";
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}
</style>

@code {
    string EditorValue { get; set; }

    public List<IEditorTool> ToolCollection { get; set; } = new List<IEditorTool>() {
            new InsertTable()
        };
}

Unplanned
Last Updated: 05 Jul 2022 11:28 by ADMIN

I upgraded my Blazor UI package to 3.3.0 to try and get rid of the multiple tbody issue with adding a table.  Now there is an even weirder problem.  Adding a table with two columns via setting the Editor's value in the code block is causing several table cells to get inserted in between and around the desired ones.

This is my long html string:

<div style="padding:20px;text-align:center;">
<table style="width:100%;"><tbody>
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2019</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1"><p style="text-align: right"><strong>AMOUNT DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">$562.35</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>5% PENALTY</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤28.12</p></td>
					</tr>
					<tr>
				        <td colspan="1"><p style="text-align: right"><strong>INTEREST DUE</strong></p></td>
				        <td colspan="1"><p style="text-align: left">¤129.34</p></td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>LATE FEE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">$105.00</p>
						</td>				        
			        </tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤824.81</p>
						</td>
					</tr>	
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2020</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.34</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤61.43</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤384.77</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
                <tr>					
					<td colspan="2">
						<p style= "text-align:center; font-size: medium; color: #3E579A; background-color: #dbebfa;">
							<strong>TAX YEAR 2021</strong>
						</p>
					</td>
				</tr>
			
			        <tr>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: right"><strong>AMOUNT DUE</strong></p>
						</td>
				        <td colspan="1" style="width:50%;">
					        <p style="text-align: left">¤323.47</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right"><strong>INTEREST DUE</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left">¤19.41</p>
						</td>
					</tr>
					<tr>
				        <td colspan="1">
					        <p style="text-align: right;color: #3E579A;"><strong>TOTAL</strong></p>
						</td>
				        <td colspan="1">
					        <p style="text-align: left;color: #3E579A;">¤342.88</p>
						</td>
					</tr>					
				
				<tr style="border:none;">
			        <td style="border:none;">
				        &nbsp;
					</td>			        
				</tr>
			
			<tr>
		        <td colspan="1">
			        <p style="text-align: right;color: #3E579A;"><strong>TOTAL DUE</strong></p>
				</td>
		        <td colspan="1">
			        <p style="text-align: left;color: #3E579A;">¤1,552.46</p>
				</td>
			</tr>	
			</tbody>
</table>
</div>
		

This is the result:

At this point I am having to downgrade to 3.2.0 in order for it to look anything near what I need it to.

Here is my modal with the Editor component.

<div class="modal fade" id="bill-modal" tabindex="-1" aria-labelledby="bill-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
	                    <h5 class="modal-title" id="redemption-bill-modal-label">Bill</h5>	              	           
	            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <TelerikEditor Id="TheEditor" @ref="@TheEditor" Value="@EditorContent" Tools="@Tools" EditMode="EditorEditMode.Iframe" Class="editor-iframe" Height="800px">
                    <EditorCustomTools>
                        <EditorCustomTool Name="MyCustomTools">
                            <div style="margin-right: 50px">
                                <TelerikButton OnClick="@Print" Icon="print" class="m-1"></TelerikButton>
                                <TelerikButton OnClick="@ExportToPdf" Icon="download" class="m-1"></TelerikButton>
                                <TelerikDropDownList Data="@SupportedExportFormats" @bind-Value="@ExportFormat" Width="auto" class="m-1"></TelerikDropDownList>
                            </div>
                        </EditorCustomTool>
                    </EditorCustomTools>
                </TelerikEditor>
            </div>
        </div>
    </div>
</div>

I'm setting the Value via an exposed method that uses some complicated code to generate that html string above.  I don't think it's necessary to have to strip out the proprietary data and paste that here, but please let me know if that would help resolve this issue.

Thanks.

Completed
Last Updated: 16 Jun 2022 05:55 by ADMIN
Release 3.3.0

When selecting an image, I expect drag handles to show me that an image selection has occurred and that let me resize the image.

*** Thread created by admin on customer behalf ***

Unplanned
Last Updated: 14 Jun 2022 08:53 by Miroslav
If a TelerikEditor and TextArea are hosted in a Form and both are bound to the same value, changing the value of the TextArea will not update the value of the Editor. Changing the value of the editor will change the value of the textarea. 
Unplanned
Last Updated: 24 May 2022 18:08 by ADMIN
Created by: Roland
Comments: 4
Category: Editor
Type: Feature Request
2

I bind the TelerikEditor Value to a property that is reloaded with different unrelated content. The editor keeps the Undo/Redo stack so for the "second" content I can Undo back to the "first" content. I'd like to be able to clear the Undo stack.

Completed
Last Updated: 29 Apr 2022 14:22 by ADMIN
Release 3.3.0

When you paste a table in the Editor or insert one through the InsertHTML tool, most of the Editor Table tools don't work on the pasted table. Only Delete Table tool can be used. The rest of the Table tools do not seem to invoke any action with the table.

If you create table using the Create Table tool this behavior is not present, you can accordingly apply the built-in Table tools.

Completed
Last Updated: 29 Apr 2022 12:42 by ADMIN
Release 3.3.0

Steps to reproduce:

https://demos.telerik.com/blazor-ui/editor/overview

1. Clean content
2. Insert sentence
3. Center it and press Enter
4. Type new sentence and select whole content (Ctrl + A)
5. Align not possible, because is selected

Expected: All paragraphs in the editors receive center alignment

Actual: Align is possible

Completed
Last Updated: 29 Apr 2022 09:19 by ADMIN
Release 3.3.0
Created by: Emran
Comments: 0
Category: Editor
Type: Bug Report
2

If I click accidentally click on one of the alignment options, I cannot then unselect it.

===========

ADMIN EDIT

Video of the current behavior attached.

===========

 

Completed
Last Updated: 26 Apr 2022 20:04 by ADMIN
Release 3.3.0
Created by: Michael
Comments: 2
Category: Editor
Type: Feature Request
6
  • Wizard for inserting new tables
  • Drag to resize tables and columns

Similar to https://demos.telerik.com/kendo-ui/editor/index

Declined
Last Updated: 26 Apr 2022 04:55 by ADMIN

Hi,

We are using the Blazor Editor for a feature in one of our web apps, and created a custom tool for the editor that allows the user to modify the raw HTML.

If an IFrame is added to the HTML with an empty or missing "src" attribute like so:

<iframe src=""></iframe>

OR

<iframe></iframe>

The editor will throw a JS Interop exception:

No value supplied for attribute src
      OP@https://[redacted]/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:6:830821
      PP.prototype.computeAttrs

Would you guys consider this a bug with the editor? Since they are technically valid elements, mganss' HtmlSanitizer does not remove sourceless IFrames and unfortunately there does not seem to be a way to make it do so.

Thanks in advance for the assistance!

Completed
Last Updated: 20 Apr 2022 18:41 by ADMIN
Release 3.3.0
Created by: Eli
Comments: 1
Category: Editor
Type: Bug Report
5

When you paste a table in the Editor or insert one through the InsertHTML tool, the Editor adds two  <tbody> tags making this invalid HTML.

If you include a table in the initially rendered content (not pasting it afterwards), two <tbody> tags appear as well.

If you create table using the Create Table tool this behavior is not present, only one <tbody> tag is added as expected.

Completed
Last Updated: 22 Mar 2022 09:33 by ADMIN
Created by: John Campion
Comments: 2
Category: Editor
Type: Bug Report
2


Please review your demo at https://demos.telerik.com/blazor-ui/editor/overview in Safari on MacOS and you'll see that the HTML Editor's height is not showing correctly.

 

Unplanned
Last Updated: 22 Mar 2022 09:00 by ADMIN
Created by: Stewart
Comments: 1
Category: Editor
Type: Feature Request
1

Currently, the Insert Image Dialog for the editor labels doesn't look great. the first two seem right-aligned and the second two items seem left-aligned. this screenshot is from the demo site.

Completed
Last Updated: 25 Feb 2022 10:11 by ADMIN
Release 3.1.0
Created by: Sheldon
Comments: 0
Category: Editor
Type: Feature Request
1

It looks like the Iframes now work, but a Video tag with Source tags does not, like the following:

<video class='embed-responsive embed-responsive h-100' controls='controls'>

<source src= '/File/101' type='video/webm' />

<source src='/File/108' type='video/mp4' />

</video>

The View HTML Button will remove the whole video tag. And the 'insertHtml' will throw an Error on the JS Console.

These Tags are necessary because different browsers and OSs may not be able to display certain media types. So usually you provide multiple sources for the different requirements. Is there a way to allow these Tags in the 'insertHtml' Method?

1 2 3