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:
- Add a table
- Toggle the Editor
- Cells appear taller
Highlight an existing hyperlink and click the Insert Hyperlink button. The update button is empty
Hello,
Please allow standard form elements in the Editor content:
- <button> tags
- <input> tags (textboxes, checkboxes, buttons, radio buttons)
- <textarea> tags
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?
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()
};
}
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;">
</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;">
</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;">
</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.
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 ***
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.
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.
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
If I click accidentally click on one of the alignment options, I cannot then unselect it.
===========
ADMIN EDIT
Video of the current behavior attached.
===========
- Wizard for inserting new tables
- Drag to resize tables and columns
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.computeAttrsWould 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!
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.
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.
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.
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?