How to create a Rich Text box with or without web view in xamarin forms?

Question

I want create a Rich Text box with or without web view in xamarin forms. I tried many examples but none of that worked for me. The examples are

https://github.com/XAM-Consulting/TEditor

The problem with this example was, it is too slow for me and it was not editing my text at all. And it was getting crash numerous times. So I tried to follow this example

https://forums.xamarin.com/discussion/95318/rich-text-box-in-xamarin-forms

but the code by Adam.Else gave me lots of bugs and it was not working. I have reported the bug in stackoverflow. As you can see this link below-

Unhandled Exception: Xamarin.Forms.Xaml.XamlParseException: Position 12:21. StaticResource not found for key FromRTFConverter occurred

I don't know how to fix this issue. Any suggestions?

Answer 1

I did it using web view. First I downloaded a Rich text box which was created using HTML/CSS and JavaScript. This is the link for the Rich text box which I'm going to use as the web view in my xamarin forms app.

MainPage.xaml

<StackLayout>
        <!-- Place new controls here -->

        <WebView x:Name="MyWebView"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    </StackLayout>

MainPage.xaml.cs

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            MyWebView.Source = new HtmlWebViewSource();
            MyWebView.Source = DependencyService.Get<IBaseUrl>().Get();
        }
    }

I created a interface called IBaseUrl. This is my code

public interface IBaseUrl { string Get(); }

And I created a class in Native called BaseUrl_Android for calling the Html file which I have put in my Assets folder in android. This is my code for BaseUrl_Android

[assembly: Dependency(typeof(BaseUrl_Android))]
namespace webviewdemo.Droid
{
    public class BaseUrl_Android : IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/fontawesome5.html";
        }
    }
}

Add your HTML and JavaScript file in assets folder. If you have any doubt in adding and using html file in xamarin forms refer this link. This is all you have to do to get an awesome Rich text box in Xamarin Forms.

This is the screenshot of my Rich text box

Answer 2

Is there any way to get the htlm code of the textarea like the java script does in c# or directly by typing a new code in the html file. capture of the html code retrieved by the javascript function

I tried to retrieve the html code by using a simple implementation in the html file and in the C# file by using the following code: await webview.EvaluateJavaScriptAsync($"document.getElementById('theText').value;");

Unfortunately, the html code is totally different and the