如何实现卡饭论坛纯文本查看 / 双击代码区域 Ctrl+A快速复制

如题。代码很多的时候高度自定义，有下拉导航条





原地址http://bbs.kafan.cn/thread-1816123-1-1.html

上图：

点击纯文本查看，是一个弹窗，如图：


查看他网页源代码是这样的

1. <div style="padding:15px 0;"><div style="font-size:12px;">[Asm] <em class="viewsource" style="cursor:pointer;font-size:12px;color:#369 !important;">纯文本查看</em> <em class="copycode" style="cursor:pointer;font-size:12px;color:#369 !important;">复制代码</em></div><pre class="brush: asm; gutter: true">
   
2. </pre>
   
3. 2
   
4. 1
   
5. 2
   
6. 代码这里</div>

复制代码

还有一个JS代码如下：

1. <script type="text/javascript">
   
2. function mw_syntaxhighlighter_show_editor_codebox(editortype) {
   
3. var tag = 'code';
   
4. var mw_syntaxhighlighter_tag = 'mw_shl_code';
   
5. var str = '请输入要插入的代码<br>选择语言：';
   
6. str += '<select id="brush_lang" name="lang">';str += '<option value="asm">Asm</option>';
   
7. str += '<option value="applescript">AppleScript</option>';
   
8. str += '<option value="actionscript3">Actionscript3</option>';
   
9. str += '<option value="bash">Bash shell</option>';
   
10. str += '<option value="coldfusion">ColdFusion</option>';
    
11. str += '<option value="c">C</option>';
    
12. str += '<option value="cpp">C++</option>';
    
13. str += '<option value="csharp">C#</option>';
    
14. str += '<option value="css">CSS</option>';
    
15. str += '<option value="delphi">Delphi</option>';
    
16. str += '<option value="diff">Diff</option>';
    
17. str += '<option value="erlang">Erlang</option>';
    
18. str += '<option value="groovy">Groovy</option>';
    
19. str += '<option value="html">HTML</option>';
    
20. str += '<option value="java">Java</option>';
    
21. str += '<option value="javafx">JavaFX</option>';
    
22. str += '<option value="javascript">JavaScript</option>';
    
23. str += '<option value="pascal">Pascal</option>';
    
24. str += '<option value="patch">Patch</option>';
    
25. str += '<option value="perl">Perl</option>';
    
26. str += '<option value="php">PHP</option>';
    
27. str += '<option value="text">Plain Text</option>';
    
28. str += '<option value="powershell">PowerShell</option>';
    
29. str += '<option value="python">Python</option>';
    
30. str += '<option value="ruby">Ruby</option>';
    
31. str += '<option value="rails">Ruby on Rails</option>';
    
32. str += '<option value="sass">Sass</option>';
    
33. str += '<option value="scala">Scala</option>';
    
34. str += '<option value="scss">Scss</option>';
    
35. str += '<option value="shell">Shell</option>';
    
36. str += '<option value="sql">SQL</option>';
    
37. str += '<option value="vb">Visual Basic</option>';
    
38. str += '<option value="vbnet">Visual Basic .NET</option>';
    
39. str += '<option value="xhtml">XHTML</option>';
    
40. str += '<option value="xml">XML</option>';
    
41. str += '<option value="xslt">XSLT</option>';
    
42. str += '<option value="objc">Objective-C</option>';
    
43. str += '<option value="aauto">AAuto</option>';
    
44. str += '<option value="golang">Golang</option>';
    
45. 
    
46. str += '</select><br>';
    
47. 
    
48. str += '显示行号：';
    
49. str += '<input type="checkbox" id="show_gutter" name="show_gutter" value="1" checked><br>';
    
50. 
    
51. 
    
52. if(editortype == 'newthread') {
    
53. 
    
54. var sel, selection;
    
55. var str1 = '', strdialog = 0, stitle = '';
    
56. var ctrlid = editorid + '_' + tag;
    
57. var menu = $(ctrlid + '_menu');
    
58. var pos = [0, 0];
    
59. var menuwidth = 270;
    
60. var menupos = '43!';
    
61. var menutype = 'menu';
    
62. 
    
63. str += '<div id="mw_codearea">你的代码：<br>';
    
64. str += '<textarea id="' + ctrlid + '_param_1" style="width: 98%" cols="50" rows="5" class="txtarea"></textarea></div>';
    
65. 
    
66. //note 修改了ie下的不兼容问题
    
67. if(BROWSER.ie) {
    
68. if(wysiwyg) {
    
69. editdoc.body.focus();
    
70. sel = editdoc.selection.createRange();
    
71. } else {
    
72. sel = document.selection.createRange();
    
73. }
    
74. pos = getCaret();
    
75. }
    
76. 
    
77. selection = sel ? (wysiwyg ? sel.text : sel.text) : mw_highlighter_getSel();//note 修改sel.HtmlText修改为Text，编辑器中的可视化用插件实现比较困难
    
78. if(menu) {
    
79. if($(ctrlid).getAttribute('menupos') !== null) {
    
80. menupos = $(ctrlid).getAttribute('menupos');
    
81. }
    
82. if($(ctrlid).getAttribute('menuwidth') !== null) {
    
83. menu.style.width = $(ctrlid).getAttribute('menuwidth') + 'px';
    
84. }
    
85. 
    
86. if(selection) {//note 如果选择了内容的处理
    
87. $('mw_codearea').style.display = 'none';
    
88. }
    
89. 
    
90. showMenu({'ctrlid':ctrlid,'evt':'click','pos':menupos,'timeout':250,'duration':in_array(tag, ['fontname', 'fontsize', 'sml']) ? 2 : 3,'drag':1});
    
91. } else {
    
92. 
    
93. var menu = document.createElement('div');
    
94. menu.id = ctrlid + '_menu';
    
95. menu.style.display = 'none';
    
96. menu.className = 'p_pof upf';
    
97. menu.style.width = menuwidth + 'px';
    
98. 
    
99. s = '<div class="p_opt cl"><span class="y" style="margin:-10px -10px 0 0"><a onclick="hideMenu();return false;" class="flbc" href="javascript:;">关闭</a></span><div>' + str + '</div><div class="pns mtn"><button type="submit" id="' + ctrlid + '_submit" class="pn pnc"><strong>提交</strong></button></div></div>';
    
100. menu.innerHTML = s;
     
101. $(editorid + '_editortoolbar').appendChild(menu);
     
102. 
     
103. if(selection) {//note 如果选择了内容的处理
     
104. $('mw_codearea').style.display = 'none';
     
105. }
     
106. 
     
107. showMenu({'ctrlid':ctrlid,'mtype':menutype,'evt':'click','duration':3,'cache':0,'drag':1,'pos':menupos});
     
108. }
     
109. 
     
110. try {
     
111. if($(ctrlid + '_param_1')) {
     
112. $(ctrlid + '_param_1').focus();
     
113. }
     
114. } catch(e) {}
     
115. var objs = menu.getElementsByTagName('*');
     
116. for(var i = 0; i < objs.length; i++) {
     
117. _attachEvent(objs[i], 'keydown', function(e) {
     
118. e = e ? e : event;
     
119. obj = BROWSER.ie ? event.srcElement : e.target;
     
120. if((obj.type == 'text' && e.keyCode == 13) || (obj.type == 'textarea' && e.ctrlKey && e.keyCode == 13)) {
     
121. if($(ctrlid + '_submit') && tag != 'image') $(ctrlid + '_submit').click();
     
122. doane(e);
     
123. } else if(e.keyCode == 27) {
     
124. hideMenu();
     
125. doane(e);
     
126. }
     
127. });
     
128. }
     
129. if($(ctrlid + '_submit')) $(ctrlid + '_submit').onclick = function() {
     
130. checkFocus();
     
131. if(BROWSER.ie && wysiwyg) {
     
132. setCaret(pos[0]);
     
133. }
     
134. if(wysiwyg) {
     
135. if(!BROWSER.ie) {
     
136. selection = selection ? selection : '';
     
137. }
     
138. }
     
139. str1 = $(ctrlid + '_param_1') && $(ctrlid + '_param_1').value ? $(ctrlid + '_param_1').value : (selection ? selection : '');
     
140. 
     
141. var opentag = '[' + mw_syntaxhighlighter_tag + '=' + $('brush_lang').value + ',' + (($('show_gutter') && $('show_gutter').checked) ? 'true' : 'false') + ']';
     
142. var closetag = '[/' + mw_syntaxhighlighter_tag + ']';
     
143. 
     
144. if(wysiwyg) {
     
145. str1 = preg_replace(['<', '>'], ['<', '>'], str1);
     
146. 
     
147. str1 = str1.replace(/\r?\n/g, '<br />');
     
148. }
     
149. str1 = opentag + str1 + closetag;
     
150. insertText(str1, strlen(opentag), strlen(closetag), false, sel);
     
151. hideMenu();
     
152. };
     
153. 
     
154. } else if(editortype == 'fastpost' || editortype == 'post') {
     
155. 
     
156. var sel = false;
     
157. var seditorkey = editortype;
     
158. if(!isUndefined($(seditorkey + 'message').selectionStart)) {
     
159. sel = $(seditorkey + 'message').selectionEnd - $(seditorkey + 'message').selectionStart;
     
160. } else if(document.selection && document.selection.createRange) {
     
161. $(seditorkey + 'message').focus();
     
162. var sel = document.selection.createRange();
     
163. $(seditorkey + 'message').sel = sel;
     
164. sel = sel.text ? true : false;
     
165. }
     
166. 
     
167. var ctrlid = seditorkey + tag;
     
168. var menuid = ctrlid + '_menu';
     
169. 
     
170. str += '<div id="mw_codearea">你的代码：<br>';
     
171. str += '<textarea id="' + ctrlid + '_param_1" style="width: 98%" cols="50" rows="5" class="txtarea"></textarea></div>';
     
172. 
     
173. if(!$(menuid)) {
     
174. var submitstr = "seditor_insertunit('" + seditorkey + "', '[" + mw_syntaxhighlighter_tag + "=' + $('brush_lang').value + ',' + (($('show_gutter') && $('show_gutter').checked) ? 'true' : 'false') + ']'+$('" + ctrlid + "_param_1').value, '[/" + mw_syntaxhighlighter_tag + "]', null, 1);hideMenu();";
     
175. var menu = document.createElement('div');
     
176. menu.id = menuid;
     
177. menu.style.display = 'none';
     
178. menu.className = 'p_pof upf';
     
179. menu.style.width = '270px';
     
180. $('append_parent').appendChild(menu);
     
181. menu.innerHTML = '<span class="y"><a onclick="hideMenu()" class="flbc" href="javascript:;">关闭</a></span><div class="p_opt cl"><form onsubmit="' + submitstr + ';return false;" autocomplete="off"><div>' + str + '</div><div class="pns mtn"><button type="submit" id="' + ctrlid + '_submit" class="pn pnc"><strong>提交</strong></button><button type="button" onClick="hideMenu()" class="pn"><em>取消</em></button></div></form></div>';
     
182. }
     
183. if(sel) {//note 如果选择了内容的处理
     
184. $('mw_codearea').style.display = 'none';
     
185. }
     
186. showMenu({'ctrlid':ctrlid,'evt':'click','duration':3,'cache':0,'drag':1});
     
187. }
     
188. }
     
189. 
     
190. function mw_highlighter_getSel() {
     
191. if(wysiwyg) {
     
192. try {
     
193. selection = editwin.getSelection();
     
194. return selection.toString();
     
195. //checkFocus();
     
196. //range = selection ? selection.getRangeAt(0) : editdoc.createRange();
     
197. //return readNodes(range.cloneContents(), false);
     
198. } catch(e) {
     
199. try {
     
200. var range = editdoc.selection.createRange();
     
201. if(range.htmlText && range.text) {
     
202. return range.text;
     
203. } else {
     
204. var htmltext = '';
     
205. for(var i = 0; i < range.length; i++) {
     
206. htmltext += range.item(i).outerHTML;
     
207. }
     
208. return htmltext;
     
209. }
     
210. } catch(e) {
     
211. return '';
     
212. }
     
213. }
     
214. } else {
     
215. if(!isUndefined(editdoc.selectionStart)) {
     
216. return editdoc.value.substr(editdoc.selectionStart, editdoc.selectionEnd - editdoc.selectionStart);
     
217. } else if(document.selection && document.selection.createRange) {
     
218. return document.selection.createRange().text;
     
219. } else if(window.getSelection) {
     
220. alert(editdoc);
     
221. return window.getSelection() + '';
     
222. } else {
     
223. return false;
     
224. }
     
225. }
     
226. }
     
227. </script>

复制代码

我的意思就是我们现在这样发的这么一段js代码很长 很多，暂用了网页很长一段，不利于用户体验，要是能乡他一样吧这段文字代码收缩起来就好多了

别沉啊