| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 901 人关注过本帖
标题:html编辑器浏览器兼容问题
只看楼主 加入收藏
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
结帖率:100%
收藏
 问题点数:0 回复次数:2 
html编辑器浏览器兼容问题
在学做一个HTML编辑器。。
在浏览器兼容方面发现很多不同。。。


js 代码:window.onload=function()
{
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    leleHTML.document.designMode = "on";
    leleHTML.document.contentEditable = true;
    leleHTML.focus();
}
function CheckForm()
{
    var leleContent = document.getElementById("leleEditor").contentWindow.document.getElementsByTagName("body")[0].innerHTML
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    if(leleContent==""||leleContent=="<P>&nbsp;</P>"||leleContent=="<br>")
    {
        alert("请输入内容,谢谢!");
        leleHTML.focus();
        return false;
    }
    else
    {
        getValue(leleContent);   
    }
}

function getValue(content)
{
    document.getElementById("content").value=content;  //此处需要根据表单名字进行变换
}


//字体选择
function FontName(value)
{
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    var leleText = leleHTML.document.selection.createRange();
    if(leleText)
    {
        leleHTML.document.execCommand("FontName", "false", value);
    }   
}
//文字大小
function FontSize(value)
{
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    var leleText = leleHTML.document.selection.createRange();
    if(leleText)
    {
        leleHTML.document.execCommand("FontSize", "false", value);
    }   
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" src="Editor.js"></script>
<style type="text/css">
body{
    background:#303030;
}
.leleEditor{
    width:875px;
    height:200px;
    border:1px solid #CCCCCC;
}
.leleTools{
    width:100%;
    height:21px;
    background:#F7F5F4;
    padding:6px 0px;
    border-bottom:1px solid #CCCCCC;
}
.leleIframe{
    width:100%;
    height:auto;
    background:#FFFFFF;
}
/*工具栏设置*/
.leleMargin{
    margin-left:3px;
}
</style>
<title>无标题文档</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="lele.asp">
<div class="leleEditor">
  <div class="leleTools">
    <select name="leleFont" id="leleFont" class="leleMargin" onChange="FontName(this.options[this.selectedIndex].value)">
        <option value="">字体</option>
        <option value="宋体">宋体</option>
        <option value="黑体">黑体</option>
        <option value="楷体_GB2312">楷体</option>
        <option value="仿宋_GB2312">仿宋</option>
        <option value="隶书">隶书</option>
        <option value="幼圆">幼圆</option>
        <option value="新宋体">新宋体</option>
        <option value="细明体">细明体</option>
        <option value="Arial">Arial</option>
        <option value="Arial Black">Arial Black</option>
        <option value="Arial Narrow">Arial Narrow</option>
        <option value="Courier">Courier</option>
        <option value="Courier New">Courier New</option>
        <option value="Script">Script</option>
        <option value="System">System</option>
        <option value="Verdana">Verdana</option>
        <option value="Wide Latin">Wide Latin</option>
        <option value="Wingdings">Wingdings</option>
    </select><select name="leleFontSize" id="leleFontSize" class="leleMargin" onChange="FontSize(this.options[this.selectedIndex].value)">
        <option value="">字号</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
  </div>
  <div class="leleIframe"><iframe id="leleEditor" frameborder="0" width="100%" height="167" marginheight="5" marginwidth="5" src="about:blank"></iframe></div>
</div>

<p>
  <input name="content" type="hidden" id="content" />
</p>
<p>
  <input type="submit" value="获取编辑器内容" onclick="return CheckForm();" />
</p>
</form>
</body>
</html>

.asp文件
<%
 response.write request.Form("content")
%>

红色部份。。在IE下可以。。在FF浏览器下没有效果。。请问一般这问题是什么导致的。需要如何兼容FF浏览器?
搜索更多相关主题的帖子: 浏览器 编辑器 html 
2009-10-25 14:48
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
aspic版主。。帮我参考一下。。谢谢。。上次的获取值浏览器达到兼容效果了。。。

学习编程www.
2009-10-25 14:53
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
selection

是这个不兼容FF的问题。。现在兼容了。

//字体选择
function FontName(value)
{
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    leleHTML.focus();
    leleHTML.document.execCommand("FontName",false,value);
}
//文字大小
function FontSize(value)
{
    var leleHTML = document.getElementById("leleEditor").contentWindow;
    leleHTML.focus();
    leleHTML.document.execCommand("FontSize",false,value);
}

学习编程www.
2009-10-25 16:38
快速回复:html编辑器浏览器兼容问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.013638 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved