IE 5.5 的内置编辑器（在MSDN ONLINE翻出来的资料）

作者： unknow

editRegions.htm

<HTML>
<HEAD>
<TITLE>Editable Regions Sample</TITLE>

<STYLE>
BODY{margin:0;
        background:white;
        font-family:verdana;
        font-size:80%;}
BUTTON {cursor:hand;
        background:#ffffff;
        border-color:#99ccff;
        font-weight:bold;}
.bar{background:#336699;
        width:100%;
        height:30px;
        border-top:1px solid #99CCFF;
        border-bottom:1px solid #000000;}
.desbar{background:#FFFFFF;
        width:100%;
        padding: 10px;
        border-top:1px solid #CCCCCC;
        border-bottom:1px solid #000000;
        color:black;
        font-size:8pt;
        height:105;}
.title{font-size:15pt;
        color:white;
        padding-left:10px;}
.bar A:link {text-decoration:none; color:white}
.bar A:visited {text-decoration:none; color:white}
.bar A:active {text-decoration:none; color:white}
.bar A:hover {text-decoration:none; color:yellow}
</STYLE>

<SCRIPT>


function fnInit(){
    
    
    for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "on";
    
    oDiv.unselectable = "off";
    oTextarea.unselectable = "off";
}



function fnToggleEdits(oObj,oBtn) {
    currentState = oObj.isContentEditable;
    newState = !currentState;
    oObj.contentEditable = newState;

    newState==false ? oBtn.innerHTML=@#Turn Editing On@# :
        oBtn.innerHTML=@#Turn Editing Off@#;
}

</SCRIPT>
</HEAD>

<BODY onload="fnInit();">

<DIV CLASS="bar title">Editable Regions Sample</DIV>

<DIV CLASS="desbar">
    <H4 style="font-size:10pt;">This example demonstrates the features of
        Microsoft® Internet Explorer that enable users to edit the content
        of an HTML element directly from the browser.</H4>
    <P>This HTML editor is a <B>DIV</B> element set to be content-editable. Any
        valid HTML content (text, images, form controls, etc.) can be pasted
        and edited in this editor.</P>

    <DIV ALIGN="center">
        <DIV ALIGN="center" STYLE="height:210; width:90%;
            background-color:#99CCFF; border:1px solid black">
            <DIV CLASS="bar title">HTMLEditor (Content-Editable DIV)</DIV>

            <DIV style="padding:10px">
                <BUTTON ID="oEditDiv" TITLE="Turn Editing Off"
                  onclick=@#fnToggleEdits(oDiv,oEditDiv);oDiv.focus();@#>
                  Turn Editing Off</BUTTON>
                <BUTTON ID="oBoldBtn" TITLE="Bold"
                  onclick=@#if (oDiv.isContentEditable==true)
                  document.execCommand("Bold");@#><B>Bold</B></BUTTON>
                <BUTTON ID="oItalicBtn" TITLE="Italic"
                  onclick=@#if (oDiv.isContentEditable==true)
                  document.execCommand("Italic");@#><I>Italic</I></BUTTON>
                <BUTTON ID="oUndLnBtn" TITLE="Underline"
                  onclick=@#if (oDiv.isContentEditable==true)
                  document.execCommand("Underline");@#><U>Underline</U></BUTTON>

<BUTTON ID="CreateLink " TITLE="Underline"
                  onclick=@#if (oDiv.isContentEditable==true)
                  document.execCommand("CreateLink");@#><U>CreateLink</U></BUTTON>
<BUTTON ID="CreateLink " TITLE="Underline"
                  onclick=@#if (oDiv.isContentEditable==true)
                  document.execCommand("InsertImage","xx");@#><U>InsertImage</U></BUTTON>


</DIV>
            <DIV id=oDiv CONTENTEDITABLE ALIGN=left STYLE="height:100;
                width:95%;background-color:white; font-face:Arial; padding:3;
                border:inset #99ccff; scrollbar-base-color:#99ccff;
                overflow=auto;"></DIV>
            <BUTTON TITLE="Append from HTMLEditor"
                onclick=@#oTextarea.value+=oDiv.innerHTML;oTextarea.focus();@#>
                Append to TextEditor</BUTTON>


        </DIV>
    </DIV>

    <P>This text editor is a <B>TEXTAREA</B> element and is content-editable by
        default. Only text can be edited in this tool. However, you can draft
        HTML in the TEXTEditor and press the <B>Append to HTMLEditor</B> button
        to see the result appended to HTMLEditor. The <B>Append to
        TextEditor</B> button reverses this process by appending the
        HTMLEditor@#s HTML as text to the TEXTEditor.
    </P>
    <BR/>

    <DIV ALIGN="center">
        <DIV ALIGN="center" STYLE="height:210; width:90%;
            background-color:#99ccff; border:1px solid black">
            <DIV CLASS="bar title">TEXTEditor (TEXTAREA)</DIV>

            <DIV style="padding:10">
                <BUTTON ID="oEditText" TITLE="Turn Editing Off"
                    onclick=@#fnToggleEdits(oTextarea,oEditText);
                    oTextarea.focus();@#>Turn Editing Off</BUTTON>
            </DIV>

            <TEXTAREA id=oTextarea ALIGN=left STYLE="height:100; width:95%;
                background-color:white; padding:3; border:inset #99ccff;
                scrollbar-base-color:#99ccff; overflow=auto;"></TEXTAREA><BR/>
            <BUTTON TITLE="Append to HTMLEditor"
                onclick=@#oDiv.innerHTML+=oTextarea.value;oTextarea.focus();@#>
                Append to HTMLEditor</BUTTON>
        </DIV>
    </DIV>
    <BR/>
    <P>Both editors use the same function to activate or deactivate editing.
        The function uses the <B>isContentEditable</B> property to test whether
        editing is active. Accordingly, the <B>contentEditable</B> property is
        then reversed to reset editing.</P>
</DIV>
<DIV CLASS="bar" STYLE=" padding:5px; padding-left:10">
    <A href="http://www.microsoft.com/misc/cpyright.htm" target=_top>
    ©2001 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>
上面的例子我加了两个按钮，原例见：
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/editRegions.htm

参考：
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contentEditable.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/execCommand.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp

返回顶部

下一篇：滚动条颜色生成器IE5.5+ >>