效果
分析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>