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.
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?
If a user creates an unordered list and then decides to switch to an ordered list, they can do it simply by clicking on the "Insert Ordered List" button and vice versa.
However, if the list another list nested within it, the action either does not work or exhibits weird behavior. Please have a look at the attached example project containing the editor and a sample nested list string.
1. Placing your cursor within the outer ordered list highlights the "Insert Ordered List" button. Clicking on the "Insert Unordered List" button will either fail, create a weird intermediate level only for the item currently containing the cursor, or only change the item currently under the cursor.
2. Attempting to highlight the entire list will also highlight both the Insert List buttons. Clicking on Insert Ordered List will flatten the whole thing into paragraphs. Clicking on Insert Unordered List will mess up the list.
I expect the editor should more or less work similarly to the form in which I'm typing this message.
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.
Please add built-in toolbar tools (buttons) for Cut, Copy and Paste.
The request from our customer is to have similar behavior as typical toolbars in most applications where there is a cut and paste along with the regular keyboard shortcuts.
As the toolbar options typically show the options that are available then one might presume that because cut and paste icons are not present then such a shortcut might not be available either.
The Editor is not showing its Value in the following scenario:
- Using JSInterop in OnAfterRenderAsync
- Setting the Editor Value in OnAfterRenderAsync and after the JSInterop call
- Blazor Server app (seems to work in WebAssembly)
Possible workarounds are:
- Set the Editor Value and call StateHasChanged() before using JSInterop in OnAfterRenderAsync, or
- Add some small delay (for example, await Task.Delay(100); ) before using JSInterop.
Hello,
I expect Shift + Ins to behave like a standard paste (Ctrl + V), but instead, it behaves like a plain text paste (Ctrl + Shift+ V).
Hello,
If the Edtor content includes <br /> tags, they will be lost if the user copy-pastes them to a plain text environment such as Notepad or a <textarea>.
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()
};
}
---
ADMIN EDIT
A workaround is to initialize the RemoveAttributes list:
<TelerikEditor @bind-Value="@EditorContent">
<EditorSettings>
<EditorPasteSettings
RemoveAttributes="@( new List<string>() )"
>
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@EditorContent
@code{
string EditorContent { get; set; }
}---
I am using the LinkCommandArgs to programmatically create a link. I am adding all the required parameters (string href, string text, string target, string title) but no link is added to the Editor content.
Reproduction: https://blazorrepl.telerik.com/QyOTwCuU48HSG5xp41.
===
ADMIN EDIT
===
For the time being, you may add a link using the HtmlCommandArgs tool and the "insertHtml" command like so: https://blazorrepl.telerik.com/GyuTmMkt56f3YiM754.
I have the following command
await _editorRef.ExecuteAsync(new HtmlCommandArgs("insertHtml", "<hr class='donotremove' />", false));
Currently, the <hr/> element is added but its class is stripped. This is not the case with other elements.
Reproduction: https://blazorrepl.telerik.com/GRYyGUbH492QNMki44.
Please allow adding class to <hr/> elements, too.
Description :
When you click before the content in the Editor, the cursor should show up before the text. But, if a text was added programmatically, the cursor shows up after the added text instead.
To reproduce the problem :
1. Open this REPL example: https://blazorrepl.telerik.com/cdYpPabd37jvK9jt23
2. Click the "Insert Inline Text" button.
3. Try to place the cursor in front of the editor content.
In Editors that use the ProseMirror engine (including non-Telerik), when you click Enter twice in the middle of formatted text and go back (with an up arrow) to write, the new text format is back to default.
This enhancement will allow you to keep the text format after pressing Enter and creating new block elements.
When adding an icon such as <i class="fa-light fa-envelope"></i> (the format which FontAwesome recommends), the icon's HTML disappears upon saving. We figured this was maybe due to the type of tag used (the i tag), so we tried using a div instead (<div class="fa-light fa-envelope"></div>). This div is not stripped from the HTML but the icon is not rendered.
Please allow inserting icons in the Editor content.