用Twebbrowser做可控编辑器与MSHTML
生活随笔
收集整理的這篇文章主要介紹了
用Twebbrowser做可控编辑器与MSHTML
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先要明白mshtml的屬性方法：
{IHTMLDocument2 方法:} write //寫入 writeln //寫入并換行 open //打開一個流，以收集 document.write 或 document.writeln 的輸出 close //關閉并輸出用 document.open 方法打開的流 clear //清空文檔中所有元素, 可能暫時不支持 queryCommandSupported //是否支持指定命令 queryCommandEnabled //指定命令是否有效 queryCommandState //是否設置了指定命令 queryCommandIndeterm //指定命令是否處于不確定狀態 queryCommandText //命令 queryCommandValue //命令值 execCommand //執行命令 execCommandShowHelp //命令幫助信息 createElement //建立元素 elementFromPoint //指定坐標下的元素 createStyleSheet //創建一個樣式表{IHTMLDocument2 屬性:} all //所有 HTML 元素的集合 images //所有 image 對象的集合 applets //所有 applet 對象的集合 links //所有 link 對象的集合 forms //所有 form 對象的集合 anchors //所有 anchor 對象的集合 scripts //所有 script 對象的集合 frames //所有 frame 對象的集合, 這應該和 window.frames 是一樣的 embeds //所有 embed 對象的集合 plugins //所有 plugin 對象的集合 styleSheets //樣式表集合 title //網頁標題 body //body 對象 activeElement //當前具有輸入焦點的元素 designMode //設計模式, 可選值: Inherit On Off selection //當前選擇 readyState //頁面讀取狀態: uninitialized、loading、loaded、interactive、completed linkColor //鏈接的顏色 alinkColor //活動鏈接的顏色 vlinkColor //已訪問過的鏈接的顏色 bgColor //背景顏色 fgColor //文本顏色 referrer //返回載入當前頁面的頁面的 URL location //同 window.location lastModified //返回文檔最后修改的日期和時間 url //返回當前文檔的 URL domain //返回域名 cookie //返回文檔相關的 cookie expando //可設置與獲取的布爾值, 是否允許擴展 charset //獲取文檔的字符集名稱 defaultCharset //獲取瀏覽器默認的字符集名稱 mimeType //文檔類型 fileSize //文檔大小, 單位字節, 用字符串表示 fileCreatedDate //文檔建立時間 ??? fileModifiedDate //文檔修改時間 ??? fileUpdatedDate //文檔更新時間 ??? security //文檔安全 protocol //傳輸協議 nameProp //文件標題, 好像同 Title parentWindow //父窗口 Script //{IHTMLDocument2 事件:} onhelp //用 F1 獲取幫助時 onclick //單擊時 ondblclick //雙擊時 onmousedown //鼠標點下時 onmouseup //鼠標抬起時 onmousemove //鼠標移動時 onmouseover //鼠標進入時 onmouseout //鼠標離開時 onkeypress //按鍵時 onkeyup //鍵按住時 onkeydown //鍵抬起時 onreadystatechange //狀態改變時 onrowexit //當前數據源的數據將要發生變化時 onrowenter //當前數據源的數據發生變化并且有新的數據時 ondragstart //開始拖動時 onselectstart //開始選擇時 onbeforeupdate //更新前 onafterupdate //更新后 onerrorupdate //更新錯誤時{IHTMLDocument3 方法:} recalc //重新獲取文檔中的全部動態屬性 releaseCapture //釋放文檔中對象的鼠標捕捉{IHTMLDocument3 屬性:} createTextNode //建立文本 attachEvent //綁定事件 detachEvent //取消事件綁定 createDocumentFragment//創建新文檔 getElementsByName //返回帶有指定 name 的對象集合 getElementById //返回指定 id 的第一個對象的引用 getElementsByTagName //返回指定標簽的對象集合 documentElement //獲取文檔根部節點, 也就是 HTML 節點 uniqueID //獲取對象的唯一標識符 dir // parentDocument // enableDownload baseUrl //基礎地址{IHTMLDocument3 事件:} onrowsdelete //當前數據記錄被刪除時 onrowsinserted //當前數據源將要插入新數據時 oncellchange //當數據來源發生變化時 ondatasetchanged //數據源發生變化時 ondataavailable //當數據接收完成時 ondatasetcomplete //當數據源的全部有效數據讀取完畢時 onpropertychange //改變屬性時 oncontextmenu //當按下鼠標右鍵出現菜單或通過鍵盤觸發頁面菜單時 onstop //停止或離開時{IHTMLDocument4 方法:} focus //獲得輸入焦點 hasFocus //是否擁有輸入焦點 createDocumentFromUrl //下載指定網頁并返回其 IHTMLDocument2 接口 CreateEventObject //生成當使用 fireEvent 方法時用于傳遞事件相關信息的 event 對象 ??? FireEvent{IHTMLDocument4 屬性:} createRenderStyle //建立 IHTMLRenderStyle 接口 namespaces // media // URLUnencoded //獲取去除字符編碼的 URL{IHTMLDocument4 事件:} onselectionchange //改變選擇時 oncontrolselect //好像是框選時{IHTMLDocument5 方法:} createAttribute //建立指定 name 的屬性 createComment //建立注釋{IHTMLDocument5 屬性:} doctype //文檔類型 implementation_ //獲取 IHTMLDOMImplementation 接口 compatMode //兼容模式, 返回 BackCompat、CSS1Compat 等{IHTMLDocument5 事件:} onmousewheel //旋轉鼠標滾動輪時 onfocusin //獲取輸入焦點時 onfocusout //失去輸入焦點時 onactivate //激活時 ondeactivate //當前對象變為父文檔的其他對象時 onbeforeactivate //onactivate 前 onbeforedeactivate //ondeactivate 前 Ihtmldocument2接口的使用 MSHTML是微軟公司的一個COM組件，該組件封裝了HTML語言中的所有元素及其屬性，通過其提供的標準接口，可以訪問指定網頁的所有元素．MSHTML對象模型是由一些對象和集合組成的．處于根部的是HTML，描述了打開頁面的1個窗口，包括一系列集合和對象。如Frames集合，History，Location，Navigator，Document，Vi—sum，Event對象等．其中描述呈現在客戶窗口實際網頁的是Document對象。由一系列的屬性、方法、對象和集合組成．其中All集合中包含網頁中所有標記(Tag)元素，其主要的方法和屬性有：(1)Length(長度)：即標記出現的個數，可以把標記的集合理解為從0開始的一維數組，其次序按照標記在網頁位置排列；(2)Tags(標記)：用于過濾出給定標記的集合，如Doc．Al1．Tags(P)得到所有分段標記P；(3)Item(項目)：用于選擇集合中的某1個元素，如object．item(0)得到集合的第1個元素，而object．item(i)得到第i+1個元素．此外，IHTMLElement也是個常用的集合對象，代表網頁中指定標記的集合，通過這個集合對象，可以得到網頁上特定標記的內容．IHTMLElement有4個主要屬性：(1)InnerText：開始標記和結束標記之間的文本；(2)InnerHTML：開始標記和結束標記之間的文本和HTML；(3)OuterText：對象的文本；(4)OuterHTML：對象的文本和HTML． 注意：使用前加入單元mshtml 演示表單提交 procedure TForm1.Button1Click(Sender: TObject); var Doc:IHTMLDocument2; input:OleVariant; userinputelement,pwdinputelement:ihtmlinputelement; begin doc:=webbrowser1.document as ihtmldocument2; userinputelement:=(doc.all.item('user'(也就是網頁中用戶名控件的名字),0) as ihtmlinputelement); userinputelement.value:=edit1.text;(也就是你要向網頁輸入的東西) pwdinputelement:=(doc.all.item('password',0) as ihtmlinputelement); pwdinputelement.value:=edit2.text; input:=doc.all.item('submit',0); input.click; end; 當提交數據按鈕沒有NAME屬性時，采用如下方法： procedure TForm1.Button1Click(Sender: TObject); var Doc:IHTMLDocument2; form:ithmlformelement; userinputelement,pwdinputelement:ihtmlinputelement; begin doc:=webbrowser1.document as ihtmldocument2; userinputelement:=(doc.all.item('user'(也就是網頁中用戶名控件的名字),0) as ihtmlinputelement); userinputelement.value:=edit1.text;(也就是你要向網頁輸入的東西) pwdinputelement:=(doc.all.item('password',0) as ihtmlinputelement); pwdinputelement:=edit2.text; form:=(doc.all.item('login_form',0) as ihtmlformelement): form.submit; end; 登錄"按鈕一般都是網頁中默認的回車按鈕,所以可以用上面代碼來代替前面的點擊按鈕 讀取某網頁內容 在創建窗體的時候打開一網頁webbrowser1.navigate('http://www.baidu.com') procedure TForm1.Button1Click(Sender: TObject); begin memo1.lines.add(ihtmldocument2(webbrowser1.document).body.outerhtml); end;這樣一來memo1中顯示www.baidu.com的html 利用webbrowser1控件瀏覽某txt中文件的內容，并以html形式來顯示出來 在webbrowser1的控件中的ondocumentcomplete事件加入如下代碼 procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject; const pDisp: IDispatch; var URL: OleVariant); var webdoc:htmldocument ; webbody:htmlbody; begin webdoc:=webbrowser1.document as htmldocument; webbody:=webdoc.body as htmlbody; webbody.insertAdjacentHTML('beforeend','<form method="POST" action="">'); webbody.insertAdjacentHTML('beforeend','Password: '); webbody.insertAdjacentHTML('beforeend','<input type="password" >'); webbody.insertAdjacentHTML('beforeend','<input type="submit" value="LOGIN" >'); webbody.insertAdjacentHTML('beforeend',' '); webbody.insertAdjacentHTML('beforeend','</form>'); end;讀取的時候，webbrowser控件得要完整的打開某一網頁， View Code把上面相關資料搞明白，事情就會簡單很多。
1、希望只有部分內容可以編輯：注意【contentEditable=true】的使用：
<BODY ><P contentEditable=true>USEGEAR(只有這里可以編輯)</p> <P> </P> <P> </P> <P>68767896897</P> <P> </P> <P>yutyuty</P> <P> </P></BODY>2、希望在可編輯區光標處插入html文本or其他
((WebBrowser1.Documentas IHTMLDocument2).selection.createRange as IHtmlTxtRange).pasteHTML('hello usegear!');3、html文件中有關圖像文件的處理
由于編輯結果是一個html文件，需要如同word文檔帶上圖像的一個文件，而不可能還有個單獨圖像文件 ，所以把圖像文件轉成base64的文本放在html中
4、其他的編輯功能，網上很多。
document.execCommand()方法處理Html數據時常用語法格式 如下:
復制內容到剪貼板
代碼 :
document.execCommand(sCommand[,交互方式, 動態參數 ])
其中：sCommand為指令參數(如下例中的"2D-Position")，交互方式參數如果是true的話將顯示對話框，如果為false的話，則不顯示對話框(下例中的"false"即表示不顯示對話框)，動態參數一般為一可用值或屬性 值(如下例中的"true")。
document.execCommand("2D-Position","false","true");
調用execCommand()可以實現瀏覽器菜單 的很多功能. 如保存文件 ,打開新文件,撤消、重做操作...等等. 有了這個方法,就可以很容易的實現網頁中的文本編輯器.
如果靈活運用,可以很好的輔助我們完成各種項目.
使用的例子如下:
1、〖全選〗命令的實現
[格式]:document.execCommand("selectAll")
[說明]將選種網頁中的全部內容！
[舉例]在<body></body>之間加入：<a href="#" οnclick=document.execCommand("selectAll")>全選</a>
2、〖打開〗命令的實現
[格式]:document.execCommand("open")
[說明]這跟VB等編程設計中的web browser控件中的命令有些相似，大家也可依此琢磨琢磨。
[舉例]在<body></body>之間加入：<a href="#" οnclick=document.execCommand("open")>打開</a>
3、〖另存為〗命令的實現
[格式]:document.execCommand("saveAs")
[說明]將該網頁保存到本地盤的其它目錄！
[舉例]在<body></body>之間加入：<a href="#" οnclick=document.execCommand("saveAs")>另存為</a>
4、〖打印〗命令的實現
[格式]:document.execCommand("print")
[說明]當然，你必須裝了打印機！
[舉例]在<body></body>之間加入：<a href="#" οnclick=document.execCommand("print")>打印</a>
Js代碼? 下面列出的是指令參數及意義
//相當于單擊文件中的打開按鈕
document.execCommand("Open");
//將當前頁面 另存為
document.execCommand("SaveAs");
//剪貼選中的文字到剪貼板;
document.execCommand("Cut","false",null);
//刪除選中的文字;
document.execCommand("Delete","false",null);
//改變選中區域的字體;
document.execCommand("FontName","false",sFontName);
//改變選中區域的字體大小;
document.execCommand("FontSize","false",sSize|iSize);
//設置前景顏色;
document.execCommand("ForeColor","false",sColor);
//使絕對定位的對象可直接拖動;
document.execCommand("2D-Position","false","true");
//使對象定位變成絕對定位;
document.execCommand("AbsolutePosition","false","true");
//設置背景顏色;
document.execCommand("BackColor","false",sColor);
//使選中區域的文字加粗;
document.execCommand("Bold","false",null);
//復制選中的文字到剪貼板;
document.execCommand("Copy","false",null);
//設置指定錨點為書簽;
document.execCommand("CreateBookmark","false",sAnchorName);
//將選中文 本變成超連接,若第二個參數為true,會出現參數設置對話框;
document.execCommand("CreateLink","false",sLinkURL);
//設置當前塊的標簽名;
document.execCommand("FormatBlock","false",sTagName); ?
//相當于單擊文件中的打開按鈕
document.execCommand("Open");
//將當前頁面另存為
document.execCommand("SaveAs");
//剪貼選中的文字到剪貼板;
document.execCommand("Cut","false",null);
//刪除選中的文字;
document.execCommand("Delete","false",null);
//改變選中區域的字體;
document.execCommand("FontName","false",sFontName);
//改變選中區域的字體大小;
document.execCommand("FontSize","false",sSize|iSize);
//設置前景顏色;
document.execCommand("ForeColor","false",sColor);
//使絕對定位的對象可直接拖動;
document.execCommand("2D-Position","false","true");
//使對象定位變成絕對定位;
document.execCommand("AbsolutePosition","false","true");
//設置背景顏色;
document.execCommand("BackColor","false",sColor);
//使選中區域的文字加粗;
document.execCommand("Bold","false",null);
//復制選中的文字到剪貼板;
document.execCommand("Copy","false",null);
//設置指定錨點為書簽;
document.execCommand("CreateBookmark","false",sAnchorName);
//將選中文本變成超連接,若第二個參數為true,會出現參數設置對話框;
document.execCommand("CreateLink","false",sLinkURL);
//設置當前塊的標簽名;
document.execCommand("FormatBlock","false",sTagName);
document對象execCommand通常在IE中在線處理Html數據時非常有用，它可以讓你輕而易舉實現文字的加粗、加顏色、加字體等一系列的命令。
??? D-Position 允許通過拖曳移動絕對定位的對象。
??? AbsolutePosition 設定元素的 position 屬性為“absolute”(絕對)。
??? BackColor 設置或獲取當前選中區的背景顏色。
??? BlockDirLTR 目前尚未支持。
??? BlockDirRTL 目前尚未支持。
??? Bold 切換當前選中區的粗體顯示與否。
??? BrowseMode 目前尚未支持。
??? Copy 將當前選中區復制到剪貼板。
??? CreateBookmark 創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱。
??? CreateLink 在當前選中區上插入超級鏈接，或顯示一個對話框允許用戶指定要為當前選中區插入的超級鏈接的 URL。
??? Cut 將當前選中區復制到剪貼板并刪除之。
??? Delete 刪除當前選中區。
??? DirLTR 目前尚未支持。
??? DirRTL 目前尚未支持。
??? EditMode 目前尚未支持。
??? FontName 設置或獲取當前選中區的字體。
??? FontSize 設置或獲取當前選中區的字體大小。
??? ForeColor 設置或獲取當前選中區的前景(文本)顏色。
??? FormatBlock 設置當前塊格式化標簽。
??? Indent 增加選中文本的縮進。
??? InlineDirLTR 目前尚未支持。
??? InlineDirRTL 目前尚未支持。
??? InsertButton 用按鈕控件覆蓋當前選中區。
??? InsertFieldset 用方框覆蓋當前選中區。
??? InsertHorizontalRule 用水平線覆蓋當前選中區。
??? InsertIFrame 用內嵌框架覆蓋當前選中區。
??? InsertImage 用圖像覆蓋當前選中區。
??? InsertInputButton 用按鈕控件覆蓋當前選中區。
??? InsertInputCheckbox 用復選框控件覆蓋當前選中區。
??? InsertInputFileUpload 用文件上載控件覆蓋當前選中區。
??? InsertInputHidden 插入隱藏控件覆蓋當前選中區。
??? InsertInputImage 用圖像控件覆蓋當前選中區。
??? InsertInputPassword 用密碼控件覆蓋當前選中區。
??? InsertInputRadio 用單選鈕控件覆蓋當前選中區。
??? InsertInputReset 用重置控件覆蓋當前選中區。
??? InsertInputSubmit 用提交控件覆蓋當前選中區。
??? InsertInputText 用文本控件覆蓋當前選中區。
??? InsertMarquee 用空字幕覆蓋當前選中區。
?? InsertOrderedList 切換當前選中區是編號列表還是常規格式化塊。
??? InsertParagraph 用換行覆蓋當前選中區。
??? InsertSelectDropdown 用下拉框控件覆蓋當前選中區。
??? InsertSelectListbox 用列表框控件覆蓋當前選中區。
??? InsertTextArea 用多行文本輸入控件覆蓋當前選中區。
??? InsertUnorderedList 切換當前選中區是項目符號列表還是常規格式化塊。
??? Italic 切換當前選中區斜體顯示與否。
??? JustifyCenter 將當前選中區在所在格式化塊置中。
??? JustifyFull 目前尚未支持。
??? JustifyLeft 將當前選中區所在格式化塊左對齊。
??? JustifyNone 目前尚未支持。
??? JustifyRight 將當前選中區所在格式化塊右對齊。
??? LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成后更新。
??? MultipleSelection 允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多于一個站點可選元素。
??? Open 目前尚未支持。
??? Outdent 減少選中區所在格式化塊的縮進。
??? OverWrite 切換文本狀態的插入和覆蓋。
??? Paste 用剪貼板內容覆蓋當前選中區。
??? PlayImage 目前尚未支持。
??? Print 打開打印對話框以便用戶可以打印當前頁。
??? Redo 目前尚未支持。
??? Refresh 刷新當前文檔。
??? RemoveFormat 從當前選中區中刪除格式化標簽。
??? RemoveParaFormat 目前尚未支持。
??? SaveAs 將當前 Web 頁面保存為文件。
??? SelectAll 選中整個文檔。
??? SizeToControl 目前尚未支持。
??? SizeToControlHeight 目前尚未支持。
??? SizeToControlWidth 目前尚未支持。
??? Stop 目前尚未支持。
??? StopImage 目前尚未支持。
??? StrikeThrough 目前尚未支持。
??? Subscript 目前尚未支持。
??? Superscript 目前尚未支持。
??? UnBookmark 從當前選中區中刪除全部書簽。
??? Underline 切換當前選中區的下劃線顯示與否。
??? Undo 目前尚未支持。
??? Unlink 從當前選中區中刪除全部超級鏈接。
??? Unselect 清除當前選中區的選中狀態。
注意：
這是拼湊的模板：
<!DOCTYPE html> <html lang="zh"> <head> <!--<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>純CSS3制作可編輯的微軟Word樣式文檔|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件庫</title><!--<link rel="stylesheet" type="text/css" href="css/sheets-of-paper-a4.css">--><!--[if IE]><script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><style type="text/css">article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;} audio,canvas,video{display:inline-block;} audio:not([controls]){display:none;height:0;}[hidden]{display:none;} html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;}a:focus{outline:thin dotted;} a:active,a:hover{outline:0;} h1{font-size:2em;margin:0.67em 0;} abbr[title]{border-bottom:1px dotted;} b,strong{font-weight:bold;}dfn{font-style:italic;} hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;} mark{background:#ff0;color:#000;} code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;} pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";} small{font-size:80%;} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup{top:-0.5em;}sub{bottom:-0.25em;} img{border:0;}svg:not(:root){overflow:hidden;} figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;} legend{border:0;padding:0;} button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;} button,input{line-height:normal;}button,select{text-transform:none;} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;} button[disabled],html input[disabled]{cursor:default;} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;} input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}</style><style type="text/css"> [class^="icon-"], [class*=" icon-"] {font-family: 'Microsoft Yahei';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }body, html { font-size: 100%; padding: 0; margin: 0;}/* Reset */ *, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after {content: " ";display: table; }.clearfix:after {clear: both; }body{ /* font-weight: 500;font-size: 1.05em;font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;*/ } a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} a:hover,a:focus{color:#74777b;text-decoration: none;} .htmleaf-container{margin: 0 auto; }.bgcolor-1 { background: #f0efee; } .bgcolor-2 { background: #f9f9f9; } .bgcolor-3 { background: #e8e8e8; }/*light grey*/ .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ .bgcolor-7 { background: #d0d6d6; }/*White tea*/ .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ .bgcolor-20{ background: #494A5F;color: #D5D6E2;} /* Header */ .htmleaf-header{padding: 1em 190px 1em;letter-spacing: -1px;text-align: center;background: #66677c; } .htmleaf-header h1 {color: #D5D6E2;font-weight: 600;font-size: 2em;line-height: 1;margin-bottom: 0;font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } .htmleaf-header h1 span {font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;display: block;font-size: 60%;font-weight: 400;padding: 0.8em 0 0.5em 0;color: #c3c8cd; } /*nav*/ .htmleaf-demo a{color: #fff;text-decoration: none;} .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} .htmleaf-demo a:hover{opacity: 0.6;} .htmleaf-demo a.current{background:#1d7db1;color: #fff; } /* Top Navigation Style */ .htmleaf-links {position: relative;display: inline-block;white-space: nowrap;font-size: 1.5em;text-align: center; }.htmleaf-links::after {position: absolute;top: 0;left: 50%;margin-left: -1px;width: 2px;height: 100%;background: #dbdbdb;content: '';-webkit-transform: rotate3d(0,0,1,22.5deg);transform: rotate3d(0,0,1,22.5deg); }.htmleaf-icon {display: inline-block;margin: 0.5em;padding: 0em 0;width: 1.5em;text-decoration: none; }.htmleaf-icon span {display: none; }.htmleaf-icon:before {margin: 0 5px;text-transform: none;font-weight: normal;font-style: normal;font-variant: normal;font-family: 'Microsoft Yahei';line-height: 1;speak: none;-webkit-font-smoothing: antialiased; } /* footer */ .htmleaf-footer{width: 100%;padding-top: 10px;} .htmleaf-small{font-size: 0.8em;} .center{text-align: center;} /****/ .related {color: #fff;background: #494A5F;text-align: center;font-size: 1.25em;padding: 0.5em 0;overflow: hidden; }.related > a {vertical-align: top;width: calc(100% - 20px);max-width: 340px;display: inline-block;text-align: center;margin: 20px 10px;padding: 25px;font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } .related a {display: inline-block;text-align: left;margin: 20px auto;padding: 10px 20px;opacity: 0.8;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-backface-visibility: hidden; }.related a:hover, .related a:active {opacity: 1; }.related a img {max-width: 100%;opacity: 0.8;border-radius: 4px; } .related a:hover img, .related a:active img {opacity: 1; } .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em} .related a h3 {font-size: 0.85em;font-weight: 300;margin-top: 0.15em;color: #fff; } /* icomoon */ .icon-htmleaf-home-outline:before {content: "\e5000"; }.icon-htmleaf-arrow-forward-outline:before {content: "\e5001"; }@media screen and (max-width: 1024px) {.htmleaf-header {padding: 2em 10% 2em;}.htmleaf-header h1 {font-size:1.4em;}.htmleaf-links{font-size: 1.4em} }@media screen and (max-width: 960px) {.htmleaf-header {padding: 2em 10% 2em;}.htmleaf-header h1 {font-size:1.2em;}.htmleaf-links{font-size: 1.2em}.related h3{font-size: 1em;}.related a h3 {font-size: 0.8em;} }@media screen and (max-width: 766px) {.htmleaf-header h1 {font-size:1.3em;}.htmleaf-links{font-size: 1.3em} }@media screen and (max-width: 640px) {.htmleaf-header {padding: 2em 10% 2em;}.htmleaf-header h1 {font-size:1em;}.htmleaf-links{font-size: 1em}.related h3{font-size: 0.8em;}.related a h3 {font-size: 0.6em;} }</style><style type="text/css">/*!* HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper)* Copyright (c) delight.im (https://www.delight.im/)* Licensed under the MIT License (https://opensource.org/licenses/MIT)*/html, body {/* Reset the document's margin values */margin: 0;/* Reset the document's padding values */padding: 0;/* Use the platform's native font as the default */font-family: "Microsoft Yahei", -apple-system, "San Francisco", "Segoe UI", "Helvetica Neue", sans-serif;/* Define a reasonable base font size */font-size: 12pt;/* Styles for better appearance on screens only -- are reset to defaults in print styles later *//* Use a non-white background color to make the content areas stick out from the full page box */background-color: #eee; } /* Styles that are shared by all elements */ * {/* Include the content box as well as padding and border for precise definitions */box-sizing: border-box;-moz-box-sizing: border-box; } .page {/* Styles for better appearance on screens only -- are reset to defaults in print styles later *//* Divide single pages with some space and center all pages horizontally */margin: 1cm auto;/* Define a white paper background that sticks out from the darker overall background */background: #fff;/* Show a drop shadow beneath each page */box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);/* Override outline from user agent stylesheets */outline: 0; } /* Defines a class for manual page breaks via inserted .page-break element */ div.page-break {page-break-after: always; } /* For top-level headings only */ h1 {/* Force page breaks after */page-break-before: always; } /* For all headings */ h1, h2, h3, h4, h5, h6 {/* Avoid page breaks immediately */page-break-after: avoid; } /* For all paragraph tags */ p {/* Reset the margin so that the text starts and ends at the expected marks */margin: 0; } /* For adjacent paragraph tags */ p + p {/* Restore the spacing between the paragraphs */margin-top: 0.5cm; } /* For links in the document */ a {/* Prevent colorization or decoration */text-decoration: none;color: black; } /* For tables in the document */ table {/* Avoid page breaks inside */page-break-inside: avoid; } /* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */ @page {/* You can only change the size, margins, orphans, widows and page breaks here *//* Require that at least this many lines of a paragraph must be left at the bottom of a page */orphans: 4;/* Require that at least this many lines of a paragraph must be left at the top of a new page */widows: 2; } /* When the document is actually printed */ @media print {html, body {/* Reset the document's background color */background-color: #fff;}.page {/* Reset all page styles that have been for better screen appearance only *//* Break cascading by using the !important rule *//* These resets are absolute must-haves for the print styles and the specificity may be higher elsewhere */width: initial !important;min-height: initial !important;margin: 0 !important;padding: 0 !important;border: initial !important;border-radius: initial !important;background: initial !important;box-shadow: initial !important;/* Force page breaks after each .page element of the document */page-break-after: always;} } .page {/* Styles for better appearance on screens only -- are reset to defaults in print styles later *//* Reflect the paper width in the screen rendering (must match size from @page rule) */width: 21cm;/* Reflect the paper height in the screen rendering (must match size from @page rule) */min-height: 29.7cm;/* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */padding-left: 2cm;padding-top: 2cm;padding-right: 2cm;padding-bottom: 2cm; } /* Use CSS Paged Media to switch from continuous documents to sheet-like documents with separate pages */ @page {/* You can only change the size, margins, orphans, widows and page breaks here *//* Paper size and page orientation */size: A4 portrait;/* Margin per single side of the page */margin-left: 2cm;margin-top: 2cm;margin-right: 2cm;margin-bottom: 2cm; }</style> </head> <body class="document"><div class="htmleaf-container" ><header class="htmleaf-header" ><h1>純CSS3制作可編輯的微軟Word樣式文檔 <span>Generating MS Word Style Sheets Of Paper With Pure CSS</span></h1></header></div><div class="page" contenteditable="true" ><span ><h1>First 1 element</h1><p>注意，頁面中的文字是可以進行修改的。</p></span></div><div class="page" contenteditable="true"><h2>Second 2 element</h2></div><script type="text/javascript">// window.print();</script> </body> </html>2ccc上有個高人n年前寫的瀏覽器編輯器，可以參考Register_HtmlEdit
5、詳細參考：https://www.cnblogs.com/xe2011/p/3144861.html
總結
以上是生活随笔為你收集整理的用Twebbrowser做可控编辑器与MSHTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 院落起名大全
- 下一篇： 模拟操作网页 webBrowser