stackoom
  简体   繁体   中英

rich text editor not working on firefox

 原文  2012-12-18 08:11:49  9   1    javascript/ rich-text-editor

Question

<html>
<head>
<title>Rich Text Editor</title>
</head>
<body onLoad="def()"><center>
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
<input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<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>
</select>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> | 
<input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
</div>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>
</center>
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();
function def()
{
document.getElementById("fonts").selectedIndex=0;
document.getElementById("size").selectedIndex=1;
document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}
-->
</script>
</body>
</html>

i browsed these codes online. yet i can't make it work on firefox. i've read some comments about this editor and it states it may be due to the iframe.

here's my source if it will be helpful, text editor link

thank you in advance.

1 answers

solution1
 0 ACCPTED  2012-12-18 08:47:52

<html>
    <head>
       <title>Rich Text Editor</title>
    </head>

    <script type="text/javascript">
    function def()
    {
        document.getElementById("textEditor").contentWindow.document.designMode="on";
        textEditor.document.open();
        textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
        textEditor.document.close();
        document.getElementById("fonts").selectedIndex=0;
        document.getElementById("size").selectedIndex=1;
        document.getElementById("color").selectedIndex=0;
    }
    function fontEdit(x,y)
    {
        document.getElementById("textEditor").contentWindow.document.execCommand(x,"",y);
        textEditor.focus();
    }
    </script>

    <body onLoad="def()">
        <center>
            <div style="width:500px; text-align:left; margin-bottom:10px ">
                <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
                <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
                <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
                <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
                <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
                <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 
                <select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
                    <option value="Arial">Arial</option>
                    <option value="Comic Sans MS">Comic Sans MS</option>
                    <option value="Courier New">Courier New</option>
                    <option value="Monotype Corsiva">Monotype</option>
                    <option value="Tahoma">Tahoma</option>
                    <option value="Times">Times</option>
                </select>
                <select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
                    <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>
                </select>
                <select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
                    <option value="black">-</option>
                    <option style="color:red;" value="red">-</option>
                    <option style="color:blue;" value="blue">-</option>
                    <option style="color:green;" value="green">-</option>
                    <option style="color:pink;" value="pink">-</option>
                </select> | 
                <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
                <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
                <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('outdent')" title="Outdent" />
                <input type="button" style="height:21px; width:21px;"value="?" onClick="fontEdit('indent')" title="Indent" />
            </div>
            <iframe id="textEditor" style="width:500px; height:170px;">
            </iframe>
        </center>

    </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question YUI rich text editor broken on latest Firefox Rails 3 and Rich text editor embedding flash in rich text editor Javascript Rich Text Editor in Flex rich text editor is not displayed correctly Syncfusion Rich Text Editor in ReactJS Google Transliteration in Rich Text Editor Add localStorage to this Rich Text Editor Rich text editor change style Rich Text Editor Not Behaving Correctly
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM