怎么能实现编辑区选择部分内容变成粗体（在Firefox下)？

什么编辑区?
textarea?iframe?还是div?
要这种效果用iframe或者div来实现是比较方便的,当然textarea也可以实现

晕. 这东西上MDC查资料, 有点麻烦...
http://developer.mozilla.org/en/docs/Main_Page

一个firefox下的例子：<script language="JavaScript">

</script>
<textarea id="editor" onselect="selectText()">发电机撒看法大家撒赖</textarea><input type="button" value="B" onclick="boldText()"/>
<div id="result"></div>

<html>
<head>
<title></title>
<script language="JavaScript">
function Blod()
{
    var rng = window.frames[0].document.selection.createRange( );
    if (rng!=null)
    {
        rng.pasteHTML("<b>" + rng.htmlText + "</b>");
    }
}
</script>
</head>
<body>
<button onclick="Blod()">加粗</button>
<iframe src="about:<font size=9>dasf</size>"></iframe>
</body>
</html>

兼容FF和IE，已经测试
<!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>无标题页</title>

</head>
<body>
<iframe style="width: 100%; height:100" marginwidth="0" marginheight="0" frameborder="1" id="MsgFrame"  src="about:blank"></iframe>
<br /><input type="button" onclick="t('UnderLine')" value="下划线" />
<input type="button" onclick="t('bold')" value="粗体" id="Button1" />
<input type="button" onclick="t('JustifyLeft')" value="左对齐" />
<input type="button" onclick="t('JustifyCenter')" value="居中对齐" /> <input type="button" onclick="t('JustifyRight')" value="右对齐" /> <input type="button" onclick="t2()" value="增高" />
<input type="button" onclick="t3()" value="减少" />
<input type="button" onclick="ViewSource()" value="查看源代码" /> <script type="text/javascript" language="javascript">     //使iframe进入编辑状态。
    var editor;
    editor = document.getElementById("MsgFrame").contentWindow;
     //window.frames["MsgFrame"].document.designMode="On"
     editor.document.open();
     editor.document.writeln('<html><head>');
     editor.document.writeln("</head><body></body></html>");
     editor.document.onclick = "alert()";
     editor.document.close();
     editor.document.designMode = 'On';
     editor.document.contentEditable = true;
     editor.document.charset="gb2312";

    function t(s)
    {
        editor.document.execCommand(s,false,null);
    }    //增高
    function t2(){
          var obj=window.frames["MsgFrame"].frameElement;

          var height = parseInt(obj.offsetHeight);//获取iframe的高度

          if (height+100 >= 100){
            obj.height = height+100;
          }
    }
    //减低
    function t3(){
          var obj=window.frames["MsgFrame"].frameElement;

          var height = parseInt(obj.offsetHeight);

          if (height-100 >= 100){
            obj.height = height-100;
          }
    }
    function ViewSource(){
        document.getElementById("textarea1").value = document.getElementById("MsgFrame").contentWindow.document.lastChild.outerHTML;
        }

</script>
<br/>
<textarea name="textarea1" rows="20" cols="100"></textarea></body>
</html>

调试易

怎么能实现编辑区选择部分内容变成粗体（在Firefox下)？

解决方案 »