实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
<head>
    <title>Rich Text Editing Example</title>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
</head>
<body>
    <form method="post" action="javascript:alert('Form submitted!')">
        <div id="divSimple">
            <input type="button" value="Bold">
            <input type="button" value="Italic">
            <input type="button" value="Underline">
            <input type="button" value="Indent">
            <input type="button" value="Outdent">
            <input type="button" value="Copy">
            <input type="button" value="Cut">
            <input type="button" value="Paste">
        </div>
        <div id="divComplex">
            <input type="button" value="Create Link" id="btnCreateLink"> 
            <input type="button" value="Change Font Size" id="btnChangeFontSize">   
            <input type="button" value="Highlight Text" id="btnHighlight">       
            <input type="button" value="Get HTML" id="btnGetHtml">
            <input type="button" value="Get Selected Text" id="btnGetSelected">
        </div>
        <div id="divQuery">Is the current selection: 
            <input type="button" value="Bold"> 
            <input type="button" value="Italic">          
            <input type="button" value="Underline">
        </div>
        <iframe name="richedit" style="height: 100px; width: 300px" src="/upload/files/201702/blank.htm"></iframe>
        <input type="hidden" name="comments" value="">
        <input type="submit" value="Submit Form">
   </form>
    <script type="text/javascript">
        
        (function(){
            
            EventUtil.addHandler(window, "load", function(){
                frames["richedit"].document.designMode = "on";
            });
            
            var simple = document.getElementById("divSimple");
            var complex = document.getElementById("divComplex");
            var queryDiv = document.getElementById("divQuery");                
            
            EventUtil.addHandler(document.forms[0], "submit", function(){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
            
                target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
            });
            
            EventUtil.addHandler(simple, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                if (target.type == "button"){                    
                    frames["richedit"].document.execCommand(target.value.toLowerCase(), false, null);                        
                }
    
            });

EventUtil.addHandler(complex, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                switch(target.id){
                    case "btnGetHtml":
                        alert(frames["richedit"].document.body.innerHTML);
                        break;
                    case "btnCreateLink":
                        var link = prompt("What link?", "https://www.wrox.com");
                        if (link){
                            frames["richedit"].document.execCommand("createlink", false, link);
                        }
                        break;
                    case "btnChangeFontSize":
                        var size = prompt("What size? (1-7)", "7");
                        if (size){
                            frames["richedit"].document.execCommand("fontsize", false, parseInt(size,10));
                        }
                        break;
                    case "btnGetSelected":
                        if (frames["richedit"].getSelection){
                            alert(frames["richedit"].getSelection().toString());
                        } else if (frames["richedit"].document.selection){
                            alert(frames["richedit"].document.selection.createRange().text);
                        }
                        break;
                    case "btnHighlight":
                        if (frames["richedit"].getSelection){
                            var selection = frames["richedit"].getSelection();
                            
                            //get the range representing the selection
                            var range = selection.getRangeAt(0);
                            
                            //highlight the selected text
                            var span = frames["richedit"].document.createElement("span");
                            span.style.backgroundColor = "yellow";
                            range.surroundContents(span);
                           
                        } else if (frames["richedit"].document.selection){
                            var range = frames["richedit"].document.selection.createRange();
                            range.pasteHTML("<span style=\"background-color:yellow\">" + range.htmlText + "</span>");
                        }
                        break;
                }

});
            
            EventUtil.addHandler(queryDiv, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                if (target.type == "button"){
                    alert(frames["richedit"].document.queryCommandState(target.value.toLowerCase(), false, null));
                }
            });

})();
    
    </script>       
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <title>Rich Text Editing Example</title>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
</head>
<body>
    <form method="post" action="javascript:alert('Form submitted!')">
        <div id="divSimple">
            <input type="button" value="Bold">
            <input type="button" value="Italic">
            <input type="button" value="Underline">
            <input type="button" value="Indent">
            <input type="button" value="Outdent">
            <input type="button" value="Copy">
            <input type="button" value="Cut">
            <input type="button" value="Paste">
        </div>
        <div id="divComplex">
            <input type="button" value="Create Link" id="btnCreateLink"> 
            <input type="button" value="Change Font Size" id="btnChangeFontSize">   
            <input type="button" value="Highlight Text" id="btnHighlight">       