I would like to be able to customize the content of the Iframe in the Editor with CSS.
===
Telerik edit:
In the meantime, it is possible to inject CSS styles in the Editor <iframe> with JavaScript:
@inject IJSRuntime js
<TelerikEditor @bind-Value="@EditorValue" />
@* Move scripts to separate js files in production. *@
<script suppress-error="BL9992">
function injectEditorStyleTag() {
var doc = document.querySelector("iframe").contentWindow.document;
var head = doc.querySelector("head");
var style = doc.createElement("style");
style.type = "text/css";
var css = "body { background: #fed; font-size: 24px; }";
style.appendChild(doc.createTextNode(css));
head.appendChild(style);
}
</script>
@code {
private string EditorValue { get; set; } = "<p>The default font-size is 24px.</p>";
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await js.InvokeVoidAsync("injectEditorStyleTag");
}
}
}
When you create or paste a table, you cannot move the cursor outside of it if there is no other content in the Editor.
----------ADMIN EDIT----------
Here is a possible workaround when using InsertTable() tool:
@using Telerik.Blazor.Components.Editor
<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>
<TelerikEditor @ref="@TheEditor" Value="@TheContent" ValueChanged="@ValueChangedHandler"></TelerikEditor>
@code {
TelerikEditor TheEditor { get; set; }
string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";
void ValueChangedHandler(string value)
{
var checkEnd = value.EndsWith("</table>");
TheContent = checkEnd == true ? value + "<p></p>" : value;
}
async Task InsertTable()
{
await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
}
}
Steps:
I am using the InsertHTML command to insert some HTML content. However, it looks like it inserts only the first element from the value I am providing.
==========
ADMIN EDIT
==========
Workaround: you can wrap the HTML content you want to insert in a container, so the InsertHTML command reads it as one element. The following sample demonstrates how to achieve that.
@using Telerik.Blazor.Components.Editor
<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Insert Html</TelerikButton>
<TelerikEditor @ref="@TheEditor" @bind-Value="@TheContent"></TelerikEditor>
<TelerikWindow @bind-Visible="@WindowIsVisible">
<WindowTitle>
<strong>Insert Html</strong>
</WindowTitle>
<WindowContent>
<TelerikTextArea @bind-Value="@HtmlToInsert"></TelerikTextArea>
<TelerikButton OnClick="@InsertHtml">Insert</TelerikButton>
</WindowContent>
</TelerikWindow>
@code{
public string HtmlToInsert { get; set; }
bool WindowIsVisible { get; set; }
TelerikEditor TheEditor { get; set; }
string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";
async Task InsertHtml()
{
await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", $"<div>{HtmlToInsert}</div>"));
WindowIsVisible = !WindowIsVisible;
HtmlToInsert = "";
}
}
---
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; }
}
---
In fashion similar to the following example for the React editor that's done through the onMount ReactJS-specific event: https://www.telerik.com/kendo-react-ui/components/editor/plugins/#popup-tools
More on plugins for ProseMirror: https://prosemirror.net/docs/ref/version/0.20.0.html#state.Plugin_System
For example, like the AJAX editor where the field appears only when simple text is selected, but when complex content is selected (e.g., other html tags like <strong>, <p>, <img>) the field is not available.
*** Thread created by admin on customer behalf ***
Like other editors from Telerik (say, Kendo, WebForms).
*** Thread created by admin on customer behalf ***