Hello,
We are adding references to other documents via a drag an drop over the text as a superscript hyperlinks. Our users are complaining that when we drag and drop onto the Blazor editor control, it is hard to see exactly where the drop is going to be.
The Kendo UI Editor supports this.
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.
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.
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>.
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?
=====ADMIN EDIT=====
Possible alternative:
- Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
- Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
- Programmatically execute the Editor's insertImage command.
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.
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.
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.
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 need help to format/pretty HTML code in the viewhtml dialog box in the Editor. Plus, I couldn't find any property on the ViewHtml class that allows setting the content when the dialog box is open.
Hi,
I tried looking through the docs and api reference for the Blazor Editor, but I can't seem to find any resizable property like the one found in the ASP.NET Core component here: ASP.NET Core Editor - Api Reference | Telerik UI for ASP.NET Core
I just wanted to check that this feature is not included in the editor for Blazor before I submitted a feature request. I tried to search the requests as well and I didn't see this request listed.
If this feature does not exist, do you know if it is being currently considered for a future release or if there is a workaround?
Thank you,
Frank
I do have a default word content available for the user, and the user will be able to change the content if required.
The track change feature would allow reviewers to quickly zoom into the edited wording (i.e. highlighted in red) for them to review quickly.
---
ADMIN EDIT
If such a feature were to be implemented as part of the component feature set, it is likely to show diff via CSS and HTML elements and would not likely compare against a Word (or any other) document.
For the time being, you can consider a custom button that will do an HTML diff against the original content that was provided to it to show it in the editor, but reconciling any changes will be a more complex task that is very far from trivial to implement.
When the Editor is disabled, the user can still focus it by tabbing and edit the content. The issue occurs in both Div and Iframe EditMode.
Click on the textbox and press TAB:
<input type="text" tabindex="0" />
<TelerikEditor Enabled="false"
EditMode="@EditorEditMode.Div"
Height="200px" />