实现一个简单编辑器-优快云博客

本文介绍了一个简单的HTML编辑器的实现方法，通过JavaScript为编辑器提供了多种文本编辑功能，包括字体加粗、文本对齐、字体设置等，并展示了具体的代码示例。
需提供以下功能：字体加粗;文本左对齐、右对齐、居中;设置字体; 设置字号; 设置字体颜色; 插入超链接; 插入图片.
demo:
  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html" charset="gb2312" charset="utf-8"/>
  5         <title>编辑器</title>
  6             <script src="script/dialog.js"></script>
  7                 <script>
  8                     window.onload = function(){
  9                         var editor = document.getElementById("editor").children[0];
 10 
 11                         function setBtn(id, styleName){
 12                             var elm = document.getElementById(id);
 13                             elm.onclick = function(){
 14                                 editor.style[styleName] = setting[id] = !setting[id] ? id : "";
 15                             }
 16                         }
 17 
 18                         //setBtn("bold", "fontWeight");
 19                         setBtn("left", "textAlign");
 20                         setBtn("center", "textAlign");
 21                         setBtn("right", "textAlign");
 22 
 23                         function setMenu(id, styleName){
 24                         var elm = document.getElementById(id);
 25                         function change(){
 26                             editor.style[id] = elm.value || elm.children[elm.selectedIndex].innerHTML;
 27                         }
 28                         change();
 29                       elm.onchange = change;
 30                         }
 31 
 32                         setMenu("color");
 33                         setMenu("fontSize");
 34                         setMenu("fontFamily");
 35     
 36                         function setChecked(id, styleName){
 37                         var elm = document.getElementById(id);
 38                         function change(){
 39                             editor.style[elm.name] = elm.checked ? this.value : "";
 40                         }
 41                         change();
 42                             elm.onchange = elm.onpropertychange = change;
 43                         }
 44     
 45                         setChecked("bold");
 46                         setChecked("left");
 47                         setChecked("center");
 48                     setChecked("right");
 49                     var link = document.getElementById("link"),
 50                       img = document.getElementById("img");
 51     
 52                     document.getElementById("img").onclick = function(){
 53                            var url = prompt("请输入图片url", "http://"),
 54                             img;
 55                            if(url){
 56                                 img = new Image();
 57                                 img.src = url;
 58                                 editor.appendChild(img)
 59                             }
 60                         }
 61 
 62                         document.getElementById("lnk").onclick = function(){
 63                             var url = prompt("请输入链接url", "http://"),
 64                             lnk;
 65                             if(url){
 66                                 lnk = document.createElement("a");
 67                                 lnk.href = url;
 68                                 lnk.innerHTML = prompt("请输入链接文字或者点击取消", "") || url;
 69                                 editor.appendChild(lnk)
 70                             }
 71                         }
 72 
 73           };
 74           </script>
 75           <link href="style/base.css" rel="stylesheet" type="text/css">
 76                 <style type="text/css">
 77                         #wrap {
 78                             padding: 50px;
 79                         }
 80                         #wrap p {
 81                             padding-bottom: 20px;
 82                             line-height: 30px;
 83                         }
 84                         #wrap p * {
 85                             vertical-align: middle;
 86                         }
 87                         button {
 88                             padding: 0 10px;
 89                         }
 90                         #editor {
 91                             border: 2px inset #ccc;
 92                             font-family: SimSun;
 93                             overflow: hidden;
 94                             cursor: text;
 95                             margin: auto;
 96                         }
 97                         #editor div{
 98                             height: 200px;
 99                             outline: none;
100                             padding: 5px;
101                         }
102                     </style>
103 </head>
104 
105     <body>
106         <div id="wrap">
107             <p>
108                 对齐方式：
109                 <input type="radio" id="left" name="textAlign" value="left" checked>
110                 <label for="left">左对齐</label>
111                 <input type="radio" id="center" name="textAlign" value="center">
112                 <label for="center">居中对齐</label>
113                 <input type="radio" id="right" name="textAlign" value="right">
114                 <label for="right">右对齐</label>
115                 &nbsp;
116                 &nbsp;
117                 &nbsp;
118                 <input type="checkbox" id="bold" name="fontWeight" value="bold">
119                 <label for="bold"><b>字体加粗</b></label>
120                 &nbsp;
121                 &nbsp;
122                 &nbsp;
123                 <button id="lnk">插入超链接</button>
124                 <button id="img">插入图片</button>
125                 <br>
126                 设置字体
127                 <select id="fontFamily">
128                     <option value="SimSun" selected>宋体</option>
129                     <option value="NSimSun" selected>新宋体</option>
130                     <option value="SimHei" selected>黑体</option>
131                     <option value="FangSong">仿宋</option>
132                     <option value="FangSong_GB2312">仿宋_GB2312</option>
133                     <option value="KaiTi">楷体</option>
134                     <option value="KaiTi_GB2312">楷体_GB2312</option>
135                 </select>
136                 &nbsp;
137                 &nbsp; 设置字号
138                 <select id="fontSize">
139                     <option selected>12px</option>
140                     <option>14px</option>
141                     <option>16px</option>
142                     <option>18px</option>
143                     <option>20px</option>
144                 </select>
145                 &nbsp;
146                 &nbsp; 设置字体颜色:
147                 <select id="color">
148                     <option selected>black
149                     <option>silver</option>
150                     <option>gray</option>
151                     <option>white</option>
152                     <option>maroon</option>
153                     <option>red</option>
154                     <option>purple</option>
155                     <option>fuchsia</option>
156                     <option>green</option>
157                     <option>lime</option>
158                     <option>olive</option>
159                     <option>yellow</option>
160                     <option>navy</option>
161                     <option>blue</option>
162                     <option>teal</option>
163                     <option>aqua</option>
164                  </select>
165             </p>
166                 <div id="editor">
167                     <div contentEditable></div>
168             </div>        
169         </div>
170     </body>
171 </html>