Silverlight中嵌入和使用html 富文字編輯器

 

      首先我要抱怨一下，silverlight 4在windowless模式下無法使用中文輸入。所以對於下面所說的方法存在著缺陷。

 

一、嵌入html頁面

 

       使用的工具為一個htmlhost的免費外掛程式，使用它可以在silverlight中嵌入html頁面，網址 

  http://www.divelements.com/silverlight/tools.aspx

      使用方法如下所示，其中 HtmlEditor.htm 頁面中包含了一個js 的ckEditor 以及讀取編輯器的一些js函數。

注意silverlight 需設定為 windowless 模式下。原理應該是直接在網頁上添加一個html frame 元素然後將其

覆蓋在silverlight之上。

 

<Grid Margin="0,12,0,0"><br /> <divtools:HtmlHost Name="htmlHost" SourceUri="http://localhost:5349/HtmlEditor/HtmlEditor.htm" HorizontalAlignment="Left" VerticalAlignment="Top" Width="850" Height="400" DocumentReady="htmlHost_DocumentReady_1"></divtools:HtmlHost><br /> </Grid> 

 

二、調用嵌入頁面的js代碼 

 

     現在的問題是如何調用嵌入頁面的js代碼，由於其不屬於silverlight同一個頁面，所以無法直接通過silverlight

的技術去調用。網上查了很多資料都沒解決方案，而且實際上我是剛轉行網站，html 和 js神馬的對於我來說真是浮雲。

還好有威風的專案經理幫我解決這個問題。

 

     解決方案是在silverlight的頁面上寫一個代理函數，然後在silverlight中就可以調用該代理函數來讀取或者操作

嵌入頁面中的編輯器了

function getEditorFrame() {<br /> return window.parent.document.getElementsByTagName("iframe")[1];<br /> }<br /> function getAllImgSrc() {<br /> var frame = getEditorFrame();<br /> if (frame == null)<br /> return null;<br /> return frame.contentWindow.getAllImgSrc();<br /> } 

 

   解釋下

    getEditorFrame函數，該函數返回嵌入的html iframe視窗。

   調用某個iframe視窗的js代碼可使用以下方法，相容IE、firefox

window.parent.document.getElementsByTagName("iframe")[x].contentWindow.getAllImgSrc();

x:可為0,1,2,3..   

    frame.contentWindow.getAllImgSrc函數 為該frame視窗頁面HtmlEditor.htm其中的js函數

 

 

    三、總結

 

        silverlight 4 現在很少有好用的htmleditor控制項，而使用以上方法由於需設定windowless模式導致外掛程式上所有

的控制項都無法輸入中文。對於silverlight 整站應用來說，是悲劇的。

         所以最後我們棄用了這個方法直接彈出另一個不是純silverlight的頁面進行編輯，然後通過SL訊息機制與首頁面互動。

 

         應該有另一個方法就是把編輯器單獨寫成一個silverlight外掛程式，然後在SL頁面中疊加上這個外掛程式，但似乎布局還有滾動控制

什麼的很難控制，誰能給個思路？

          不能輸入中文這個SL4 還是不怎麼給力，希望SL5給力點。