C++中嵌入网页（duilib编辑框的实现）

效果

分析QQ的框框，你会发现，字体等格式编辑其实都是网页。

1.xml配置

View Code

1               <HorizontalLayout >
2                 <Label text="邮件内容："  width ="60" height="16" textcolor="#FF666666"/>
3                 <ActiveX name="ie" clsid="{8856F961-340A-11D0-A96B-00C04FD705A2}" delaycreate="false"/>
4               </HorizontalLayout>

2.加载控件

void CMailDialog::Init() {
	  
	     SetIcon(IDR_MAINFRAME); //   Set   big   icon 
		
       
         m_pCloseBtn = static_cast<CButtonUI*>(paint_manager_.FindControl(_T("closebtn")));
        
		 CActiveXUI* pActiveXUI = static_cast<CActiveXUI*>(paint_manager_.FindControl(_T("ie")));
        if( pActiveXUI ) {
            IWebBrowser2* pWebBrowser = NULL;
            pActiveXUI->GetControl(IID_IWebBrowser2, (void**)&pWebBrowser);
            if( pWebBrowser != NULL ) {
				std::string strPath=ConfigManager::instance()->getSkinPath()+"\\MailEditor\\index.html";

				int Len=::MultiByteToWideChar (CP_ACP, 0, strPath.c_str(), -1, NULL, 0);
				wchar_t *buf=new wchar_t [Len];
				MultiByteToWideChar(CP_ACP,0,strPath.c_str(),-1,buf,Len); 
				std::wstring wstrFilePath=std::wstring(buf);
				delete[] buf;

				pWebBrowser->Navigate((BSTR)(wstrFilePath.c_str()),NULL,NULL,NULL,NULL);  
                pWebBrowser->Release();
            }
        }
		 
    }

index.html

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4 <meta name="save" content="history">
 5 <title>邮件编辑器</title>
 6 <link rel="stylesheet" type="text/css" href="editor/comm.css" />
 7 <script language="javascript" src="editor/all.js"></script>
 8 <script language="javascript" src="editor/editor.js"></script>
 9 <script language="javascript" src="editor/editor_toolbar.js"></script>
10 <script language="javascript">
11 function checkform(){
12 if(document.form1.title.value ==""){
13         alert("请输入标题");
14 return false;
15     }
16 var v = DoProcess();
17 if(v != true){
18         alert("请输入内容");
19 return false;
20     }    
21 }  
22 function ReSet()
23 {
24 var clientWidth=document.body.clientWidth-10;
25 var clientHeight=document.body.clientHeight-40;
26     
27     document.getElementById("HtmlEditor").style.width=clientWidth+'px';
28     document.getElementById("HtmlEditor").style.height=clientHeight+'px';
29     
30 var SourceEditorobj=document.getElementById("SourceEditor");
31 if(SourceEditorobj)
32     {
33         SourceEditorobj.style.width=clientWidth+'px';
34       SourceEditorobj.style.height=clientHeight+'px';
35     }
36 
37 }
38 </script>
39 <style type="text/css">
40 
41  .prompt {border:1px dotted #ccc;background-color:#ffe;color:#666;padding: 5px 5px 5px 30px;line-height:120%;width:1600px} 
42 </style>
43 </head>
44 <body onResize="ReSet()" scroll= "no" >
45 <table  border="0" cellpadding="2" cellspacing="1">
46 <form name="form1" method="post" action="?action=saveadd" target="_blank" onSubmit="return checkform();">
47  
48   <tr>
49     
50     <td><textarea id="content" name="content" style="display:none;"></textarea>
51         <script language="javascript">
52             
53         gFrame = 0;//1-在框架中使用编辑器
54         gContentId = "content";//要载入内容的content ID
55         OutputEditorLoading();
56 </script>
57         <iframe id="HtmlEditor" class="editor_frame" frameborder="0" marginheight="0" marginwidth="0" style="100%;height:100%;overflow:visible;" hideFocus></iframe>
58         </td>
59   </tr>
60 </form>  
61 </table>
62 </body>
63 </html>

editor可以从网上下载