We are currently evaluating the Telerik RichTextEditor MAUI component here:
https://docs.telerik.com/devtools/maui/controls/richtexteditor/toolbar/overview
However our application is a Xamarin iOS/Android Native app, which is now migrated to .NET 7 iOS/Android.
We have a simple RadContentView MAUI markup page:
<?xml version="1.0" encoding="utf-8" ?>
<telerik:RadContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
x:Class="MAUIThirdPartyControlPOC.RichTextEditorView">
<Grid RowDefinitions="{OnIdiom Phone='*, Auto'}">
<telerik:RadRichTextEditor x:Name="richTextEditor"
Grid.Row="{OnIdiom Phone=0}"
Source="{Binding Source}">
</telerik:RadRichTextEditor>
<telerik:RadRichTextEditorToolbar x:Name="richTextToolbar"
Grid.Row="{OnIdiom Default=1, Phone=1}"
RichTextEditor="{x:Reference richTextEditor}"
Margin="{OnIdiom Phone=0}" />
</Grid>
</telerik:RadContentView>
Then in our sample iOS application we are doing the following to do Native Embedding:
using Foundation;
using Microsoft.Maui.Embedding;
using UIKit;
using Telerik.Maui.Controls.Compatibility;
using Telerik.Maui.Controls;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Controls;
namespace MAUIThirdPartyControlPOC;
[Register ("AppDelegate")]
public class AppDelegate : UIApplicationDelegate {
public override UIWindow? Window {
get;
set;
}
public static MauiContext _mauiContext;
public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
{
// create a new window instance based on the screen size
Window = new UIWindow(UIScreen.MainScreen.Bounds);
// create a UIViewController with a single UILabel
var vc = new UIViewController();
vc.View.BackgroundColor = UIColor.Orange;
Window.RootViewController = vc;
// make the window visible
Window.MakeKeyAndVisible();
MauiAppBuilder builder = MauiApp.CreateBuilder();
builder.UseMauiEmbedding<Microsoft.Maui.Controls.Application>();
builder.UseTelerik();
// Register the Window
builder.Services.Add(new Microsoft.Extensions.DependencyInjection.ServiceDescriptor(typeof(UIWindow), Window));
MauiApp mauiApp = builder.Build();
_mauiContext = new MauiContext(mauiApp.Services);
var richText = new RichTextEditorView();
var richTextView = richText.ToPlatform(_mauiContext);
richTextView.TranslatesAutoresizingMaskIntoConstraints = false;
vc.View!.AddSubview(richTextView);
NSLayoutConstraint.ActivateConstraints(new[]
{
richTextView.WidthAnchor.ConstraintEqualTo(vc.View.WidthAnchor),
richTextView.HeightAnchor.ConstraintEqualTo(vc.View.HeightAnchor)
});
return true;
}
}
When you run this, and focus in the RichTextEditor, the on screen keyboard on iOS appears, however the content's inset does not slide up so that the toolbar is accessible.
The only mention of the keyboard pushing contents was on the RTB's documentation page:
- On iOS—If the
RadRichTextEditorToolbaris positioned under the keyboard, when the keyboard shows, the control is translated over the keyboard so users can access it without a problem. Due to the .NET MAUI implementation, it is important that theRadRichTextEditorToolbaris placed in a container which bounds will contain it after the control is translated over the keyboard. Otherwise, the tap and pan gestures on theRadRichTextEditorToolbarwill not work until the keyboard is hidden and the control is translated back to its original place.
However it does not mention anything about how to handle it with Native embedding.
Thanks in advance.
The initial color of the cursor is black, but it is not visible when RichTextEditor Background is black.
The cursor color changes when start typing in the editor and for example textcolor is set.
<telerik:RadRichTextEditor x:Name="richTextEditor" Grid.Row="1" TextColor="DarkOrange"
BackgroundColor="Black" />
Add ability to print Rich Text from RichTextEditor.
Can optionally be via operating system's native print dialog.