CODEWITHSUNDEEP
c#xamarin.iosxamarin.formswysiwygcustom-renderer
Alexander
Alexander

Reputation: 287

Xamarin.Forms Wysiwyg: move project from Xamarion.iOS to Xamarin.Forms using custom renderer

I want to build a wysiwyg editor as a custom component using Xamarin.Forms renderer. I found some solution which is a Xamarin.iOS project which does something I need: https://github.com/XAM-Consulting/TEditor. I followed mentioned example and implemented Wysiwyg renderer for Android but I have problems with iOS renderer. This is my overriden method of ViewRenderer<WysiwygEditor, UIView>:

protected override void OnElementChanged(ElementChangedEventArgs<WysiwygEditor> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            _view = new UIView();

            _editorWebView = new UIWebView();

            _view.Add(_editorWebView);

            var interpretter = new JavaScriptEnterpretter(_editorWebView);

            _jsApi = new RichEditorApi(interpretter);

            _editorWebView.Delegate = new WysiwygWebViewClient(_jsApi, Element.Html);

            _editorWebView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth
                                              | UIViewAutoresizing.FlexibleHeight
                                              | UIViewAutoresizing.FlexibleTopMargin
                                              | UIViewAutoresizing.FlexibleBottomMargin;

            _editorWebView.KeyboardDisplayRequiresUserAction = false;
            _editorWebView.ScalesPageToFit = true;
            _editorWebView.BackgroundColor = UIColor.White;
            _editorWebView.ScrollView.Bounces = false;

            _keyboardDidFrameToken = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.DidChangeFrameNotification, KeyboardDidFrame);
            _keyboardWillShowToken = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillShowNotification, KeyboardWillShowOrHide);
            _keyboardWillHideToken = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillHideNotification, KeyboardWillShowOrHide);

            BuildToolbar(Element.Toolbars);

            interpretter.Init();

            _jsApi.SetPlatformAsIOS();

            SetNativeControl(_view);
        }
        if (e.OldElement != null)
        {
            e.OldElement.Cleanup();
        }
        if (e.NewElement != null)
        {
            e.NewElement.Initialize(_jsApi);
            SetHtml("some html");
        }
    }

WysiwygEditor is my class which inherits Xamarin.Forms.View. The problem is that javascript calls are not working (such as _editorWebView.EvaluateJavascript("document.execCommand('bold', false, null)")). HTML which is loaded into _editorWebView contains a tag with contenteditable=true attribute

So, my question is:

  1. How to move TEditorViewController from the example to viewrenderer correctly in my project?
  2. What is the aim of the property named ViewController in the ViewRenderer? Should I need to override it?

Upvotes: 0

Views: 396

Answers (1)

SYNT4X
SYNT4X

Reputation: 210

Not sure if I understood your question correctly. But this is the way I would use an existing ViewController from Xamarin.iOS projects.

If you want to use a ViewRenderer (rather than PageRenderer) I would just initialize the ViewController and then use its View in "SetNativeControl(...)".

TEditorViewController TController;
protected override void OnElementChanged(ElementChangedEventArgs<WysiwygEditor> e)
{
    //Don´t call the base method here, since you want to create your own view.
    if (Control == null)
    {
       //Initialize TController
       TController = new TEditorViewController();
       //etc.
       SetNativeControl(TController.View);
    }
}

With this way you can use the whole controller and just wrap it into a Forms Renderer.

Upvotes: 0

Related Questions