FCKEditor装入模板方法

Posted on 2010-01-12 09:29 如是如是阅读(316) 评论(0) 编辑收藏

()里面的为说明，并不属于文件或者文件夹的名称

Assembly code

xxxx(工程目录)
 |  
 |--fckeditor(编辑器的文件夹)
 |   |
 |   |--test.html(一个测试页面，使用加载模板函数的，代码在最后贴出)
 |   |--fcktemplates.xml(fck的模板配置文件)
 |   |__......其他的文件和文件夹，fck默认有的
 |
 |--你的其他文件和文件夹
 |
 |__test1.html(另一个测试页面)

在fckeditor目录下的test.html

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FCKeditor - Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex, nofollow" />
    <link href="_samples/sample.css" rel="stylesheet" type="text/css" /><!--------注意路径------------>
    <script type="text/javascript" src="fckeditor.js"></script><!--------注意路径------------>
</head>
<body>
    <h1>
        FCKeditor - JavaScript - Sample 1
    </h1>
    <div>
        This sample displays a normal HTML form with an FCKeditor with full features enabled.
    </div>
    <hr />
    <form action="sampleposteddata.asp" method="post" target="_blank">
<script type="text/javascript">
function getHTML(o){
  var r="";
  for(var i=0;i<o.childNodes.length;i++)r+=o.childNodes[i].nodeValue;
  return r;
}
//Index:要加载的模板的索引号，从0开始
//url：模板xml的路径，相对当前页面
function ShowBo__LoadTemplates(Index,url)//使用ajax加载xml模板文件，防止google浏览器不支持当前通用的xml加载的方法从而不能在

google浏览器里初始化
{
   url+="?ts="+new Date().toString();
   var o;
   if(window.XMLHttpRequest)o=new XMLHttpRequest();
   else if(window.ActiveXObject)o=new ActiveXObject("microsoft.xmlhttp");
   else{ alert("浏览器不支持当前流行的ajax！");return "";}
   if(o){
     o.open('get',url,false);//同步     
     o.send(null)
     var dom=o.responseXML;
     var tmps=dom.getElementsByTagName("Html");//获取模板html 
     if(tmps.length==0)return "";//没有模板或者路径出错时则返回空
     if(Index>=tmps.length)Index=0;//索引号大于模板数量则默认第一个模板
     return document.all?tmps[Index].firstChild.nodeValue:getHTML(tmps[Index]);
   }
}

var tmpHtml=ShowBo__LoadTemplates(1,'fcktemplates.xml');//加载模板1====================和配置文件处在同一个目录
</script>
        <script type="text/javascript">
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath    = sBasePath ;
oFCKeditor.Height    = 300 ;
oFCKeditor.Value    = tmpHtml;//设置模板
oFCKeditor.Create() ;
        </script>
        <br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

xxxx下的test1.html

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FCKeditor - Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="robots" content="noindex, nofollow" />
    <link href="fckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /><!--------注意路径------------>
    <script type="text/javascript" src="fckeditor/fckeditor.js"></script><!--------注意路径------------>
</head>
<body>
    <h1>
        FCKeditor - JavaScript - Sample 1
    </h1>
    <div>
        This sample displays a normal HTML form with an FCKeditor with full features enabled.
    </div>
    <hr />
    <form action="sampleposteddata.asp" method="post" target="_blank">
<script type="text/javascript">
function getHTML(o){
  var r="";
  for(var i=0;i<o.childNodes.length;i++)r+=o.childNodes[i].nodeValue;
  return r;
}
//Index:要加载的模板的索引号，从0开始
//url：模板xml的路径，相对当前页面
function ShowBo__LoadTemplates(Index,url)//使用ajax加载xml模板文件，防止google浏览器不支持当前通用的xml加载的方法从而不能在

google浏览器里初始化
{
   url+="?ts="+new Date().toString();
   var o;
   if(window.XMLHttpRequest)o=new XMLHttpRequest();
   else if(window.ActiveXObject)o=new ActiveXObject("microsoft.xmlhttp");
   else{ alert("浏览器不支持当前流行的ajax！");return "";}
   if(o){
     o.open('get',url,false);//同步
     o.send(null)
     
     var dom=o.responseXML;
     var tmps=dom.getElementsByTagName("Html");//获取模板html 
     if(tmps.length==0)return "";//没有模板或者路径出错时则返回空
     if(Index>=tmps.length)Index=0;//索引号大于模板数量则默认第一个模板

     return document.all?tmps[Index].firstChild.nodeValue:getHTML(tmps[Index]);
   }

}

var tmpHtml=ShowBo__LoadTemplates(1,'fckeditor/fcktemplates.xml');//加载模板1=====================================

</script>
        <script type="text/javascript">
var sBasePath = "fckeditor/" ;//===========================注意设置这里的目录，是你当前目录相对与fckeditor目录的相对路径，最

后一个/不能少
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath    = sBasePath ;
oFCKeditor.Height    = 300 ;
oFCKeditor.Value    = tmpHtml;//设置模板
oFCKeditor.Create() ;
        </script>
        <br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

模板功能剖析

/测试工程/fckeditor/fcktemplates.xml

上面的文件就是模板功能文件，结构说明如下：

xml 代码

<?xml version="1.0" encoding="utf-8" ?>
<Templates imagesBasePath="fck_template/images/">
<Template title="验货报告表" image="template4.jpg">
<Description>本模板是验货报告表的验货主题部分</Description>
<Html>
<![CDATA[
<table align="left" cellspacing="0" cellpadding="0" width="98%" border="0">
<tbody>
<tr>
<td colspan="4" align="center">　</td>
<td align="center">  </td>
<td align="center">  </td>
</tr>
</tbody>
</table>
]]>
</Html>
</Template>
</Templates>