提交FCK编辑器中带有样式的内容时 怎么将样式导入

 

 

代码中红色的部分都涉及到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">密&nbsp;&nbsp;码:</td>
                  <td nowrap="nowrap">
                  <input type="password" name="password" value="">
                  </td>
                </tr> 
                <tr class="bgwhiteleft">
                  <td nowrap="nowrap">标&nbsp;&nbsp;题:</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">附&nbsp;&nbsp;件:</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="发送"  />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <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页面时能看到自己定义的样式效果,并且能随之通过邮件发送出去,让收件人也看到同样的效果。(我曾将样式作为字符串在后台拼凑到内容中,但接收邮件还是没有样式的效果),

期待各位大侠赐招。

 

 

2个回答

你可以在 mainID div里设置 样式文件。

fck 使用iframe作为编辑器。使用下面代码获取iframe 里面所有html内容包含等等一系列标签你使用alert打印就明白了。
FCKeditorAPI.GetInstance('content').GetXHTML(true)

你吧表格样式放在 mainID div 里就行了,fck会加载进去。

.test{ color:red; } ${emailContent}

FCK 支持内容为样式。

不知道你的${emailContent}值是什么。

在发送邮件的时候应该获取fck所有值。包括style 样式

FCKeditorAPI.GetInstance('content').GetXHTML(true)

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问