如何在winrt上使WebView可编辑?

时间:2014-03-19 17:06:02

标签: webview winrt-xaml

我需要创建简单的HTML编辑器。我知道桌面应用程序我可以访问DOM并设置DesignMode = true。如何在winrt应用程序中为WebView执行此操作?

1 个答案:

答案 0 :(得分:0)

所以我似乎找到了如何在WinRT应用程序中为WebView设置DesignMode的解决方案。

我只需要调用可以将document.designMode属性更改为“on”

的javascript方法

在我的情况下,我实现了WebView的扩展,其中添加了DependencyProperty。

public static class WebViewEx
{
    public static readonly DependencyProperty DesignModeProperty = DependencyProperty.RegisterAttached(
                                                                               "DesignMode", typeof(bool),
                                                                               typeof(WebViewEx),
                                                                               new PropertyMetadata(null, OnDesignModePropertyChanged));

    private async static void OnDesignModePropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
        if (DesignMode.DesignModeEnabled)
            return;

        WebView view = dependencyObject as WebView;
        if (view == null)
            return;

        if (e.NewValue == e.OldValue)
            return;

        await view.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
        {
            if ((bool)e.NewValue)
            {
                await view.InvokeScriptAsync("eval", new string[] { "document.designMode = \"on\";" });
            }
            else
            {
                await view.InvokeScriptAsync("eval", new string[] { "document.designMode = \"off\";" });
            }
        });
    }

    public static void SetDesignMode(DependencyObject element, bool value)
    {
        element.SetValue(DesignModeProperty, value);
    }
    public static bool GetDesignMode(DependencyObject element)
    {
        return (bool)element.GetValue(DesignModeProperty);
    }
}

这允许我从XAML打开\ DesignMode

<WebView x:Name="webViewBody" Source="about:blank" controls:WebViewEx.DesignMode="true"/>

调用javascript方法的强制要求是应该初始化webview。在我的情况下,我将source属性设置为“about:blank”