2012-06-27 150 views
1

我的目標是類似於this question
但我仍沒有得到回答我的問題Web瀏覽器控件在WPF

所以,我需要做所見即所得的HTML編輯支持的應用程序設計和生成報告模板。和上面的問題一樣,我在WPF中使用了WebBrowser控件。最大的問題是WPF web瀏覽器始終將designMode設置爲後置null到HTML的身體。所以我把WinForm WebBrowser放到我的應用程序中。並設置或獲取HTML文檔從WebBrowser處理是非常困難的。

問:

  1. 有什麼辦法使這個(使用HTML編輯器WebBrowser控件)發生使用WPF沒有改變WinForm的?
  2. 或者,如果沒有。有任何解決方法,文章,代碼或任何不論使所見即所得的HTML編輯器與可視化編輯器?

UPDATE:
我對MVVM目的,這些2附加屬性。所以我可以使用HTMLSource獲取/設置HTML,並在啓動應用程序時設置設計模式。

IsDesignMode

public static readonly DependencyProperty IsDesignModeProperty = 
    DependencyProperty.RegisterAttached("IsDesignMode", typeof (Boolean), typeof (WebBrowserHelper), 
             new UIPropertyMetadata(false, IsDesignModePropertyChanged)); 

public static Boolean GetIsDesignMode(DependencyObject obj) 
{ 
    return (Boolean)obj.GetValue(IsDesignModeProperty); 
} 

public static void SetIsDesignMode(DependencyObject obj, Boolean value) 
{ 
    obj.SetValue(IsDesignModeProperty, value); 
} 

public static void IsDesignModePropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) 
{ 
    WebBrowser browser = obj as WebBrowser; 
    if (browser != null) 
    { 
     Boolean designMode = (Boolean) args.NewValue; 
     if(designMode) 
     { 
      browser.LoadCompleted += (s, e) => 
      { 
       var htmlDoc = (s as WebBrowser).Document as IHTMLDocument2; 
       htmlDoc.body.setAttribute("contenteditable", "true"); 
       htmlDoc.designMode = "On"; 
      }; 
     } 
     else 
     { 
      browser.LoadCompleted += (s, e) => 
      { 
       var htmlDoc = (s as WebBrowser).Document as IHTMLDocument2; 
       htmlDoc.body.setAttribute("contenteditable", "false"); 
       htmlDoc.designMode = "Off"; 
      }; 
     } 
    } 
} 

HTMLSource

public static readonly DependencyProperty HTMLSourceProperty = 
    DependencyProperty.RegisterAttached("HTMLSource", typeof (String), typeof (WebBrowserHelper), 
             new UIPropertyMetadata(null, HTMLSourcePropertyChanged)); 

public static String GetHTMLSource(DependencyObject obj) 
{ 
    return (String)obj.GetValue(HTMLSourceProperty); 
} 

public static void SetHTMLSource(DependencyObject obj, String value) 
{ 
    obj.SetValue(HTMLSourceProperty, value); 
} 

public static void HTMLSourcePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs args) 
{ 
    WebBrowser browser = o as WebBrowser; 
    if (browser != null) 
    { 
     browser.NavigateToString(args.NewValue as String); 
    } 
} 

VIEW

<UserControl x:Class="Delay.View.LayoutView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:browser="clr-namespace:Delay.Helper" 
      xmlns:cal="http://www.caliburnproject.org" 
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"> 
    <UserControl.Resources> 
     <Style x:Key="ButtonStyle" TargetType="Button"> 
      <Setter Property="Width" Value="100" /> 
      <Setter Property="Height" Value="40" /> 
      <Setter Property="Margin" Value="2.5,0" /> 
      <Setter Property="ContentTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <StackPanel> 
          <ContentPresenter Content="{TemplateBinding Content}" 
               TextBlock.FontSize="15" /> 
         </StackPanel> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </UserControl.Resources> 
    <Grid Background="Lavender"> 
     <DockPanel> 
      <TextBlock HorizontalAlignment="Center" Text="Layout Designer" 
         DockPanel.Dock="Top" FontSize="20" /> 
      <WebBrowser Name="webBrowser" HorizontalAlignment="Stretch" DockPanel.Dock="Top" Margin="8" Height="435" 
         browser:WebBrowserHelper.HTMLSource="{Binding HtmlPage}" browser:WebBrowserHelper.IsDesignMode="True" /> 
      <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Center"> 
       <StackPanel Orientation="Vertical" Margin="5,0"> 
        <ComboBox ItemsSource="{Binding LayoutTags}" SelectedItem="{Binding SelectedTag}" 
           HorizontalAlignment="Stretch" Margin="0,5" MinWidth="100"> 
         <ComboBox.ItemTemplate> 
          <DataTemplate> 
           <TextBlock FontSize="12" Text="{Binding TagName}" /> 
          </DataTemplate> 
         </ComboBox.ItemTemplate> 
        </ComboBox> 
        <ListBox ItemsSource="{Binding LayoutValueTypes}" SelectedItem="{Binding SelectedType}" 
          Width="{Binding ElementName=cmbTag, Path=ActualWidth}" Height="70"> 
         <ListBox.ItemTemplate> 
          <DataTemplate> 
           <TextBlock FontSize="12" Text="{Binding TypeName}" /> 
          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox> 
       </StackPanel> 
       <StackPanel Orientation="Vertical"> 
        <StackPanel Orientation="Horizontal"> 
         <CheckBox Name="IsDesignMode" Content="Design Mode" TextBlock.FontSize="12"> 
          <i:Interaction.Triggers> 
           <i:EventTrigger EventName="Checked"> 
            <cal:ActionMessage MethodName="DesignModeOnOff"> 
             <cal:Parameter Value="{Binding ElementName=webBrowser}" /> 
             <cal:Parameter Value="{Binding IsDesignMode}" /> 
            </cal:ActionMessage> 
           </i:EventTrigger> 
          </i:Interaction.Triggers> 
         </CheckBox> 
        </StackPanel> 
        <Button Name="PutComponent" Style="{StaticResource ButtonStyle}" 
         Content="Put" /> 
        <Button Name="SaveLayout" Style="{StaticResource ButtonStyle}" 
         Content="Save" /> 
       </StackPanel> 
      </StackPanel> 
     </DockPanel> 
    </Grid> 
</UserControl> 
+0

最好的答案就是使用CONTENTEDITABLE,而不是將designMode。這是使用兩者。刪除designMode。如果您在設置designMode(我的記憶不清楚)之後使用了DocumentCompleted **,您可能會**使designMode工作。 – user34660

回答

1

你嘗試一些開放源碼而不是WInForms的替代品?

我覺得這個人有良好的互動,並能處理JavaScript回調到WPF了。

http://wpfchromium.codeplex.com/

0

我寫了一個很簡單的WPF應用程序,使用嵌入的資源爲HTML和包含下面的代碼:

Stream s = GetType().Assembly.GetManifestResourceStream("WpfApplication5.HTMLPage1.htm"); 
    webBrowser1.NavigateToStream(s); 
    IHTMLDocument2 doc = webBrowser1.Document as IHTMLDocument2; 
    doc.designMode = "On"; 

代碼和預期一樣的,我可以編輯網頁的內容 - 按照您的建議將其設置爲designMode後,它不會被清空。也許從上面的代碼開始,並檢查你可以得到它的工作。

+0

我不喜歡使用嵌入的資源,所以我可以加載HTML我之前創建。看到我更新的問 – asakura89