问题描述
代码中红色的部分都涉及到FCK，FCK的编辑内容 ${emailContent} 是包含有样式的html 页面，当把这个html的样式写到本页面时，编辑时，始终没有效果，本人对FCK的原理及其路径结构不清楚，望哪位大侠能 帮小弟解决一下：让FCK在编辑html页面时能看到自己定义的样式效果，并且能随之通过邮件发送出去，让收件人也看到同样的效果。（我曾将样式作为字符串在后台拼凑到内容中，但接收邮件还是没有样式的效果），期待各位大侠赐招。 <%@ page contentType="text/html;charset=GBK"%><%@ page language="java" %><%@ taglib uri="/tags/struts-html" prefix="html" %><%@ taglib uri="/tags/struts-bean" prefix="bean" %><%@ taglib uri="/tags/struts-logic" prefix="logic" %> <html><html:base/><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><!--标题--><object id="factory" style="display:none" viewastext classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=5,60,0,360"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object><title></title><!--样式表--><link href="../../../../${cssPath}/styleprint.css" rel="stylesheet" type="text/css"><script src="../../../../js/print.js"></script> <script language=javascript src="${contextPath}/pages/js/System.js"></script><script language=javascript src="${contextPath}/pages/js/JsPublicUtils.js"></script> <script language=javascript src="${contextPath}/pages/js/JsAjax.js"></script><script language=javascript src="${contextPath}/pages/js/DbEngine.js"></script><script language=javascript src="${contextPath}/pages/js/DateUtil.js"></script><script language="javascript" src="${contextPath}/pages/js/JsTable.js"></script><script language="javascript" src="${contextPath}/pages/js/JsPublicUtils.js"></script><script language="javascript" src="${contextPath}/pages/js/calendar.js"></script><script language="javascript" src="${contextPath}/pages/js/GetYearMonth.js"></script><script language="javascript" src="${contextPath}/pages/js/JsValidateUtils.js"></script><script language="javascript" src="${contextPath}/pages/js/JsMultiSelectComp.js"></script><link href="../../../../${cssPath}/default.css" rel="stylesheet" type="text/css"><link href="../../../../${cssPath}/stylelist.css" rel="stylesheet" type="text/css"> <link href="../../../../${cssPath}/sysstyle.css" rel="stylesheet" type="text/css"> <style type="text/css"> .txtBox { border: 1px solid #DBEAF5; font-size: 12px;}.bgbian { background-color: #1b5ba5; padding-bottom: 1px; padding-right: 1px;}.bgwhiteleft{ text-align: left; background-color: #FFFFFF; overflow:hidden;}.bgwhiteright{ text-align: right; background-color: #FFFFFF;} </style> <script type="text/javascript" src="${contextPath}/pages/js/fckeditor/fckeditor.js"></script><script language="javascript"> function load(){ var tmpcon = document.getElementById("mainID").innerHTML; document.getElementById("content").value = tmpcon; } window.onload = function(){ load(); // Automatically calculates the editor base path based on the _samples directory. // This is usefull only for these samples. A real application should use something like this: // oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. //var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ; var oFCKeditor = new FCKeditor( 'content',"100%",500) ; oFCKeditor.BasePath = "${contextPath}/pages/js/fckeditor/" ; oFCKeditor.ToolbarSet = "Default" ; oFCKeditor.ReplaceTextarea() ;}</script> <script language="javascript"> function checkForm() { var con=true; if(document.all.mailAddress.value.trim()==""){ alert("请输入发件人"); con=false; document.all.mailAddress.focus(); } else if(document.all.password.value.trim()==""){ alert("请输入发件人邮箱密码"); con=false; document.all.password.focus(); } else if(document.all.receiveAddress.value.trim()==""){ alert("请输入收件人"); con=false; document.all.receiveAddress.focus(); }else{ con=true; } return con; document.all.submitBtn.disabled= false; } function checkEmailAddress(temp){ var receiveAddress = document.all.receiveAddress.value; var o; if(temp=="mailAddress"){ receiveAddress = document.all.mailAddress.value; o="发件人"; }else{ receiveAddress = document.all.receiveAddress.value; o="收件人"; } var mailAdds = receiveAddress.split(";"); for(var i=0;i<mailAdds.length;i++){ if(mailAdds[i]=="") continue; var result = validateLib.checkEmail(mailAdds[i]); if(!result){ alert(o+"的email地址错误！"); if(temp=="mailAddress"){ document.all.mailAddress.focus(); }else{ document.all.receiveAddress.focus(); } return false; } } } function removeDtlRow(node) { node.removeNode(true); tableLib.setTableRowIndex("tableRowNum"); }function addAttachment(){ var container = document.getElementById("attachmentTable"); var tBody = container.firstChild; var trNode = document.createElement("tr"); trNode.className = "bgwhiteleft"; trNode.setAttribute("class","bgwhiteleft"); var tdNode = document.createElement("td"); var fileNode = document.createElement("input"); var fileNum = getFileNum(container); fileNode.setAttribute("type","file"); fileNode.name ="uploadFile["+fileNum+"].file"; fileNode.className = "txtBox"; fileNode.setAttribute("class","txtBox"); var btnNode = document.createElement('<input type="button" onClick="removeDtlRow(this.parentNode.parentNode)" value="删除" class="buttonstyle" />'); tdNode.appendChild(fileNode); tdNode.appendChild(btnNode); trNode.appendChild(tdNode); tBody.appendChild(trNode); }function getFileNum(container){ var inputNodes = container.getElementsByTagName("input"); var fileNum = 0; for(var i=0;i<inputNodes.length;i++){ if(inputNodes[i].type=="file") fileNum++; } return fileNum;}function checkAttachment(container){ var inputNodes = container.getElementsByTagName("input"); for(var i=0;i<inputNodes.length;i++){ if(inputNodes[i].type=="file"){ if(inputNodes[i].value ==""){ return false; } } } return true;}</script></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#B7CCE7"><html:form action="/msg/sendMail.do" onsubmit="return checkForm();" enctype="multipart/form-data" > <div align="center" style="width:90%;left:200; height:800px; margin:0 auto;position:absolute; left:75; top:50; "> <table width="100%" border="0" cellspacing="1" cellpadding="1" class="bgbian"> <tr class="bgwhiteleft"> <td nowrap="nowrap" width="3%" colspan="2" align="center"><font color="#36A9D2" size="5"><b>邮发界面<b></font></td> </td> </tr> <tr class="bgwhiteleft"> <td nowrap="nowrap" width="3%">发件人：</td> <td nowrap="nowrap"><input type="text" name="mailAddress" value="" onblur="return checkEmailAddress('mailAddress');"><font color="#36A9D2" size="2">(限于126，163，yeah.net等网易邮箱)</font> </td> </tr> <tr class="bgwhiteleft"> <td nowrap="nowrap">密 码：</td> <td nowrap="nowrap"> <input type="password" name="password" value=""> </td> </tr> <tr class="bgwhiteleft"> <td nowrap="nowrap">标 题：</td> <td nowrap="nowrap"><html:text property="subject" styleClass="txtBox" size="80"/></td> </tr> <tr class="bgwhiteleft"> <td nowrap="nowrap">收件人：</td> <td nowrap="nowrap"><html:textarea property="receiveAddress" styleClass="txtBox" rows="2" style="width:40%" onblur="return checkEmailAddress('mailAddress');" /><font color="#36A9D2" size="2">(多用户接收用分号";"隔开,如:a.@126.com;b.@126.com;...)</font></td> </tr> </table> <table width="100%" border="0" cellspacing="1" class="bgbian" > <tr class="bgwhiteleft"> <td nowrap="nowrap"><html:textarea property="content" styleClass="txtBox" style="width:100%;" rows="25"/></td> </tr> </table> <table width="100%" border="0" cellspacing="1" cellpadding="1" class="bgbian" id="attachmentTable"> </table> <table width="100%" border="0" cellspacing="1" cellpadding="1" class="bgbian"> <tr class="bgwhiteleft"> <td nowrap="nowrap">附 件：</td> <td nowrap="nowrap"><input type="button" value="添加附件" name="addBtn" class="buttonstyle" onClick="addAttachment();"/></td> </tr> </table> <div id="mainID" style="display:none"> ${emailContent}</div> </td> <table width="100%" border="0" cellspacing="1" class="bgbian"> <tr class="bgwhitecenter"> <td><html:submit property="submitBtn" styleClass="buttonstyle" value="发送" /> <html:button property="backBtn" styleClass="buttonstyle" onclick="history.back();" value="返回"/> </td> </tr> </table> </td> </tr> </table> </div> <!--页面信息1开始--> <!--页面信息1开始--> <!--页面信息1结束--> <!--总表结束--></html:form></body> 红色的部分都涉及到FCK，FCK的编辑内容 ${emailContent} 是包含有样式的html 页面，当把这个html的样式写到本页面时，编辑时，始终没有效果，本人对FCK的原理及其路径结构不清楚，望哪位大侠能 帮小弟解决一下：让FCK在编辑html页面时能看到自己定义的样式效果，并且能随之通过邮件发送出去，让收件人也看到同样的效果。（我曾将样式作为字符串在后台拼凑到内容中，但接收邮件还是没有样式的效果），期待各位大侠赐招。 问题补充：<div class="quote_title">lizhi92574 写道</div><div class="quote_div">FCK 支持内容为样式。<br /><style type="text/css"></style><br /><br />不知道你的${emailContent}值是什么。<br /><br />在发送邮件的时候应该获取fck所有值。包括style 样式<br /><br />FCKeditorAPI.GetInstance('content').GetXHTML(true)</div><br /><br />谢谢。<br />${emailContent}代表的只是 一个div里面的内容没有 style 和javascprit等脚本，是动态的数据列表。<br />问题是这个FCK所有值是仅仅包括 content控件 里面的吗？ <br />这个div里面的表样式等其他样式怎么通过FCK一起传过去了？ <br />怎么获取这个content空间里面的值和对应的页面上的样式了？<br /><br />
解决方案
你可以在 mainID div里设置<style type="text/css"></style> 样式文件。fck 使用iframe作为编辑器。使用下面代码获取iframe 里面所有html内容包含<html>等等一系列标签你使用alert打印就明白了。FCKeditorAPI.GetInstance('content').GetXHTML(true) 你吧表格样式放在 mainID div 里就行了，fck会加载进去。<div id="mainID "><style type="text/css"> .test{ color:red; }</style> ${emailContent}</div>
解决方案二：
FCK 支持内容为样式。<style type="text/css"></style>不知道你的${emailContent}值是什么。在发送邮件的时候应该获取fck所有值。包括style 样式FCKeditorAPI.GetInstance('content').GetXHTML(true)