The TelerikEditor demos all show bind-Value being used to marshal HTML in and out of the editor:

<TelerikEditor @bind-Value="@TheEditorValue" Width="650px" Height="400px"></TelerikEditor>

However, this causes problems - the underlying ProseMirror component emits it's own HTML (e.g. for image drag handles), which is visible in the bound Value property.

We need to be able to export "clean" HTML from the viewer, otherwise we end up saving this superflous HTML as part of our document.

Code

This REPL shows the issue:

https://blazorrepl.telerik.com/mHODmObJ36vZ7ivR09

@page "/editor/tools"

@using Telerik.Blazor.Components.Editor 

<TelerikEditor Tools="@EditorToolSets.All"
               Height="300px"
               @bind-Value="@Value"
               EditMode="EditorEditMode.Div"
               ></TelerikEditor>

<pre style="white-space: pre-wrap;">@Value</pre>

@code {
    public string Value { get; set; } =
        "<img src=\"img/toolbar-assets/repl-logo.svg\" />";
}

Steps to Reproduce

1. Open the REPL and click "Run" - observe that the bound HTML is simply

<img src="img/toolbar-assets/repl-logo.svg" />

2. Click on the Telerik logo image inside the editor - observe that the bound HTML is now

<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class="ProseMirror-selectednode"><div class="k-editor-resize-handles-wrapper ProseMirror-widget" style="width: 857px; height: 78px; top: 8px; left: 8px;" contenteditable="false"><div class="k-editor-resize-handle southeast" data-dir-image-resize="southeast"></div><div class="k-editor-resize-handle east" data-dir-image-resize="east"></div><div class="k-editor-resize-handle south" data-dir-image-resize="south"></div><div class="k-editor-resize-handle north" data-dir-image-resize="north"></div><div class="k-editor-resize-handle west" data-dir-image-resize="west"></div><div class="k-editor-resize-handle southwest" data-dir-image-resize="southwest"></div><div class="k-editor-resize-handle northwest" data-dir-image-resize="northwest"></div><div class="k-editor-resize-handle northeast" data-dir-image-resize="northeast"></div></div><br class="ProseMirror-trailingBreak"></p>

3. Deselect the image - observe that the bound HTML no longer contains the image handles etc, but is still more verbose than when we started

<p><img src="img/toolbar-assets/repl-logo.svg" contenteditable="false" draggable="true" class=""><br class="ProseMirror-trailingBreak"></p>

4. At any point during the above steps, click the "View HTML" button in the Editor toolbar - observe that it is able to present a "clean" structure which contains no ProseMirror markup etc.

Requirements

How do we access this HTML via the TelerikEditor Blazor APIs?

I would like to use the Editor in a more compact matter in my application. The buttons and button groups must be small, and the margins and the paddings must be smaller as well. 

The overall goal is to make the Editor take less amount of space in the UI. 

An event that we can hook into so that we can take the (presumably) base64 encoded image (link), upload it somewhere, and then replace it with an image element set to the uploaded imaged file. Ideally, that would work for other content too.

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

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.

We have a survey page that has multiple editor fields in it.  They need to accept rich text from a paste or other keyboard commands, but we do not want to waste the vertical space for the toolbar appearing in each editor field.

Please update the editor to hide the toolbar if the List<IEditorTool> collection is empty.

This change would make it much easier and less fragile than removing the toolbar to through Css.

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.

Currently, our Editor component does not support a placeholder parameter. Having a placeholder parameter, similar to the Kendo UI Editor, would prove to be beneficial.

It seems that texts/options in the Format tool dropdown are not part of the localization (Paragraph, Heading 1..6).

Editor demo

===

ADMIN EDIT

===

A possible workaround for the time being is to customize the built-in Format tool to add your desired labels for the format options.

I cannot clear the content area of the TelerikEditor when the component is placed in the Form Item Template.

<AdminEdit>

Below, you can find a workaround solution:

@using System.ComponentModel.DataAnnotations;
@using Telerik.Blazor.Components.Editor

<TelerikForm Model="@Model" OnSubmit="@OnSubmitHandler">
    <FormValidation>
        <DataAnnotationsValidator />
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem>
            <Template>
                <TelerikEditor @bind-Value="@Model.Name" @ref="@EditorRef" />
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

@code {
    public SampleData Model { get; set; } = new SampleData();
    public TelerikEditor EditorRef { get; set; }

    private async Task OnSubmitHandler(EditContext editContext)
    {
        bool isFormValid = editContext.Validate();

        if (isFormValid)
        {
            //some logic here
        }
        else
        {
            await EditorRef.ExecuteAsync(new HtmlCommandArgs("setHtml", "")); //workaround

            //clear the content of the editor to let the user type anew
            Model.Name = String.Empty;
        }
    }

    public class SampleData
    {
        [Required]
        [MinLength(30, ErrorMessage = "The content should be minimum 30 characters long.")]
        public string Name { get; set; }
    }
}

</AdminEdit>

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.

It would be great in a future release if we could paste in images from the clipboard.

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