WPF绑定到Webbrowser元素

时间:2014-11-07 11:08:15

标签: c# wpf xaml data-binding

第一次在这里张贴潜伏了一段时间。

最近我开始使用WPF,我正在考虑在我的应用程序中添加一个html编辑器。理想情况下,我想使用ckEditor,因为我过去曾将它用于Web事物。这也是一个用户控件,因为我将在几个地方使用它。

我的问题是,无论如何绑定webbrowser的某个元素?

目前我有单向绑定工作 - 当对象更改时强制对Web浏览器进行脚本调用

XAML:

<WebBrowser Name="editor" 
        Loaded="editor_Loaded" 
        Height="auto" 
        Width="auto"  
        src:WebBrowserHelper.Body="{Binding ElementName=notesUC, Path=MyHTML, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />

c#背后的xaml

NotesUserControl.HtmlProperty = DependencyProperty.Register("MyHTML", typeof(string), typeof(NotesUserControl));

我有一个Webbrowser帮助器控件类,它允许我实际绑定到它:

public static class WebBrowserHelper
{
    public static readonly DependencyProperty BodyProperty =
        DependencyProperty.RegisterAttached("Body", typeof(string), typeof(WebBrowserHelper), new PropertyMetadata(OnBodyChanged));

    public static string GetBody(DependencyObject dependencyObject)
    {
        return (string)dependencyObject.GetValue(BodyProperty);
    }

    public static void SetBody(DependencyObject dependencyObject, string body)
    {

        dependencyObject.SetValue(BodyProperty, body);

    }

    private static void OnBodyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        WebBrowser webBrowser = d as WebBrowser;
        if (webBrowser != null)
        {
            webBrowser.InvokeScript("set", e.NewValue as string ?? "&nbsp;");
        }
   }

}

然后最后执行:

<uc:NotesUserControl x:Name="NotesControl"
                NoteLabel="{Binding Path=SelectedItem.name, ElementName=selectPanel, UpdateSourceTrigger=PropertyChanged}"
                MyHTML="{Binding Path=SelectedItem.notes, ElementName=selectPanel, UpdateSourceTrigger=Property Changed}"
            />

HTML页面:

<script type="text/javascript">
    //Set the Data of the CkEditor
    function set(a)
    {
        // Get the editor instance that we want to interact with.
        var editor = CKEDITOR.instances.demo;
        //Sets the data to a
        editor.setData(a);
    }

    //Get the Data of the CK Editor
    function get()
    {
        var editor = CKEDITOR.instances.demo; 
        return editor.getData();
    }

</script>


<body>

    <textarea class="ckeditor" id="demo">
    </textarea>


</body>

我很抱歉,如果之前已经回答过,或者我错过了相关信息,那么现在四处寻找答案但是没有找到答案。

0 个答案:

没有答案