转载的，找不到原来链接了，原文主人看到留言我

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3/1999/xhtml">  
<head>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <title>富文本编辑器</title>  
</head>  
<body>  
    <fieldset>  
        <legend>编辑区</legend>  
        <div>  
            <form>  
                字体颜色：  
                <select onchange="setFontColor(this)">  
                    <option value="black">Black    </option>  
                    <option value="red">Red   </option>  
                    <option value="green">Green    </option>  
                    <option value="blue">Blue    </option>  
                </select>  
                字体样式：  
                <select onchange="setFontStyle(this)">  
                    <option value="bold">Bold    </option>  
                    <option value="italic">Italic   </option>  
                    <option value="underline">Underline    </option>  
                    <option value="striketthrough">StriketThrough    </option>  
                </select>  
                字体名称：  
                <select onchange="setFontFamily(this)">  
                    <option value="serif">Serif    </option>  
                    <option value="sans-serif">Sans-serif   </option>  
                    <option value="monospace">Monospace    </option>  
                    <option value="comic sans ms">Comic Sans    </option>  
                </select>  
            </form>  
        </div>  
        <br/>  
        <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div>  
    </fieldset>  
    <script type="text/javascript">  
        function setFontColor(obj)  
        {  
            document.execCommand("forecolor",false,obj.value);  
        }  
        function setFontStyle(obj)  
        {  
            document.execCommand(obj.value,false,null);  
        }  
        function setFontFamily(obj)  
        {  
            document.execCommand("fontname",false,obj.value);  
        }  
    </script>  
</body>  
</html>

 

更多推荐

HTML5 简单富文本编辑器