1 =begin
2 本文档是HTML代码块的编辑文件。注意不要把其他语言的设置放到html里来。
3 HBuilder可使用ruby脚本来编辑代码块和增强操作命令。
4 1、编辑代码块
5 如果要新增一个代码块，复制如下一段代码到空白行，然后设定参数。
6 'Style'是代码块的显示名字；
7 s.trigger = 'style' 是设定激活字符，比如输入style均会在代码提示时显示该代码块；
8 s.expansion = '' 是设定该代码块的输出字符，其中$0、$1是光标的停留和切换位置。
9 snippet 'Style' do |s|
10 s.trigger = 'style'
11 s.expansion = '<style type="text/css" media="screen">
12 $0
13 </style>'
14 end
15 以上以HTML代码块做示例，js和css代码块类似，使用时注意避免混淆
16 2、编辑按键命令
17 如果要新增一个按键操作命令，复制如下一段代码到空白行，然后设定参数。
18 'Br'是命令名字；
19 s.key_binding = 'CONTROL+ENTER' 是设定按什么快捷键可以触发这个命令；
20 s.expansion = '<br/>' 是设定输出字符。
21 snippet 'Br' do |s|
22 s.key_binding = 'CONTROL+ENTER'
23 s.expansion = '<br/>'
24 end
25 操作时注意冲突，注意备份，有问题就还原。
26 多看看已经写的ruby命令，会发现更多强大技巧。
27 修改完毕，需要重启才能生效。
28 玩的愉快，别玩坏！
29 脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这里，也可以在这里获取其他网友的版本
30 =end
31
32 require 'ruble'
33
34 with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle|
35
36 snippet 'data-' do |s|
37 s.trigger = 'data-'
38 s.expansion='data-${1:type/role/transition/icon/iconpos/*} = "$2"'
39 s.locationType='HTML_ATTRIBUTE'
40 end
41
42 end
43
44 with_defaults :scope => 'text.html text' do |bundle|
45
46 snippet t(:html_4_strict) do |s|
47 s.trigger = 'doctype'
48 s.expansion = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
49 "http://www.w3.org/TR/html4/strict.dtd">
50 '
51 end
52
53 snippet t(:xhtml_1_frameset) do |s|
54 s.trigger = 'doctype'
55 s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
56 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
57 '
58 end
59
60 snippet t(:xhtml_1_strict) do |s|
61 s.trigger = 'doctype'
62 s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
63 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
64 '
65 end
66
67 snippet t(:xhtml_1_transitional) do |s|
68 s.trigger = 'doctype'
69 s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
70 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
71 '
72 end
73
74 snippet t(:xhtml_11) do |s|
75 s.trigger = 'doctype'
76 s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
77 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
78 '
79 end
80
81 snippet t(:movie) do |s|
82 s.trigger = 'movie'
83 s.expansion = '<object width="${2:320}" height="${3:240}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
84 <param name="src" value="${1:movie.mov}"/>
85 <param name="controller" value="${4:true}"/>
86 <param name="autoplay" value="${5:true}"/>
87 <embed src="${1:movie.mov}"
88 width="${2:320}" height="${3:240}"
89 controller="${4:true}" autoplay="${5:true}"
90 scale="tofit" cache="true"
91 pluginspage="http://www.apple.com/quicktime/download/"
92 ></embed>
93 </object>'
94 end
95
96 snippet t(:html_4_transitional) do |s|
97 s.trigger = 'doctype'
98 s.expansion = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
99 "http://www.w3.org/TR/html4/loose.dtd">
100 '
101 end
102
103 snippet 'input with label' do |s|
104 s.trigger = 'input'
105 s.expansion = '<label for="$2">$1</label><input type="${3:text/submit/hidden/button}" name="$2" value="$5" id="$2"/>'
106 end
107
108 snippet t(:option) do |s|
109 s.trigger = 'opt'
110 s.expansion = '<option value="${1:option}">${1:option}</option>'
111 end
112
113 snippet 'input' do |s|
114 s.trigger = 'input'
115 s.expansion = '<input type="$1" name="$2" id="$2" value="$3" />'
116 s.needApplyReContentAssist = true
117 end
118
119 snippet 'textarea' do |s|
120 s.trigger = 'textarea'
121 s.expansion = '<textarea name="$1" rows="$2" cols="$3">$0</textarea>'
122 end
123
124 snippet 'canvas' do |s|
125 s.trigger = 'canvas'
126 s.expansion = '<canvas id="$1" width="$2" height="$3"></canvas>'
127 end
128
129 snippet 'iframe' do |s|
130 s.trigger = 'iframe'
131 s.expansion = '<iframe src="$1" width="$2" height="$3"></canvas>'
132 s.needApplyReContentAssist = true
133 end
134
135 snippet t(:nbsp) do |s|
136 s.key_binding = 'OPTION+Space'
137 s.expansion = ' '
138 end
139
140 snippet 'Br' do |s|
141 s.key_binding = 'CONTROL+ENTER'
142 s.expansion = '<br/>'
143 end
144
145 snippet 'link' do |s|
146 s.trigger = 'link'
147 s.expansion = '<link rel="stylesheet" type="text/css" href="$1"/>'
148 s.needApplyReContentAssist = true
149 end
150
151 snippet 'meta' do |s|
152 s.trigger = 'meta'
153 s.needApplyReContentAssist = true
154 s.expansion = '<meta name="$1" content="$2"/>'
155 end
156
157 snippet 'meta_UTF8' do |s|
158 s.trigger = 'metautf'
159 s.expansion = '<meta charset="UTF-8"/>'
160 end
161
162 snippet 'meta_GB2312' do |s|
163 s.trigger = 'metagb'
164 s.expansion = '<meta charset="GB2312"/>'
165 end
166
167 snippet 'meta_nocache' do |s|
168 s.trigger = 'metanocache'
169 s.expansion = '<meta http-equiv="Pragma" content="no-cache" />'
170 end
171
172 snippet 'meta_keywords' do |s|
173 s.trigger = 'metakeywords'
174 s.expansion = '<meta name="Keywords" content="$1"/>'
175 end
176
177 snippet 'meta_description' do |s|
178 s.trigger = 'metadescription'
179 s.expansion = '<meta name="Description" content="$1"/>'
180 end
181
182 snippet 'meta_viewport' do |s|
183 s.trigger = 'metaviewport'
184 s.expansion = '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'
185 end
186
187 snippet 'script_google_jquery' do |s|
188 s.trigger = 'scriptjqg'
189 s.expansion = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>'
190 end
191
192 snippet 'script_baidu_jquery' do |s|
193 s.trigger = 'scriptjqb'
194 s.expansion = '<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>'
195 end
196
197 snippet '<!--[if IE]>' do |s|
198 s.trigger = 'ifie'
199 s.expansion = '<!--[if IE]>
200 $1
201 <![endif]-->'
202 end
203
204 snippet '<!--[if lte IE 6]>' do |s|
205 s.trigger = 'ifie6'
206 s.expansion = '<!--[if lte IE 6]>
207 $1
208 <![endif]-->'
209 end
210
211 snippet '<select>...</select>' do |s|
212 s.trigger = 'select'
213 s.expansion = '<select name="$1">
214 <option value="$2">$3</option>
215 </select>'
216 end
217
218 snippet 'dl' do |s|
219 s.trigger = 'dl'
220 s.expansion = '<dl>
221 <dt>$1</dt>
222 <dd>$2</dd>
223 </dl>'
224 end
225
226 snippet 'ul' do |s|
227 s.trigger = 'ul'
228 s.expansion = '<ul>
229 <li>$1</li>
230 </ul>'
231 end
232
233 snippet 'form' do |s|
234 s.trigger = 'form'
235 s.expansion = "<form action=\"$1\" method=\"${2:get}\">
236 $0
237 <input type=\"submit\" value=\"$3\"/>
238 </form>"
239 s.needApplyReContentAssist = true
240 end
241
242 snippet 'input_text' do |s|
243 s.trigger = 'intext'
244 s.expansion = '<input type="text" id="$1" value="$2" />'
245 s.needApplyReContentAssist = true
246 end
247
248 snippet 'input_button' do |s|
249 s.trigger = 'inbutton'
250 s.expansion = '<input type="button" id="$1" value="$2" />'
251 s.needApplyReContentAssist = true
252 end
253
254 snippet 'input_image' do |s|
255 s.trigger = 'inimage'
256 s.expansion = '<input type="image" src="$1" />'
257 s.needApplyReContentAssist = true
258 end
259
260 snippet 'input_password' do |s|
261 s.trigger = 'inpassword'
262 s.expansion = '<input type="password" name="$1" />'
263 end
264
265 snippet 'input_search' do |s|
266 s.trigger = 'insearch'
267 s.expansion = '<input type="search" name="$1" required="$2" placeholder="Search" x-webkit-speech="$3" x-webkit-grammar="builtin:search" lang="zh-CN">'
268 end
269
270 snippet 'input_submit' do |s|
271 s.trigger = 'insubmit'
272 s.expansion = '<input type="submit" id="$1" name="$2" />'
273 end
274
275 snippet 'input_reset' do |s|
276 s.trigger = 'inreset'
277 s.expansion = '<input type="reset"/>'
278 end
279
280 snippet 'img' do |s|
281 s.trigger = 'img'
282 s.expansion = '<img src="$1"/>'
283 s.needApplyReContentAssist = true
284 end
285
286 snippet 'a_link' do |s|
287 s.trigger = 'al'
288 s.expansion = '<a href="$1"></a>'
289 s.needApplyReContentAssist = true
290 end
291
292 snippet 'a_mailto' do |s|
293 s.trigger = 'am'
294 s.expansion = '<a href="mailto:$1"></a>'
295 end
296
297 snippet 'video' do |s|
298 s.trigger = 'video'
299 s.expansion = '<video width="${1:800}" height="$2">
300 <source src="${3:myvideo.mp4}" type="video/mp4"></source>
301 <source src="${4:myvideo.ogv}" type="video/ogg"></source>
302 <source src="${5:myvideo.webm}" type="video/webm"></source>
303 <object width="$6" height="$7" type="application/x-shockwave-flash" data="${8:myvideo.swf}">
304 <param name="movie" value="$8" />
305 <param name="flashvars" value="autostart=true&file=$8" />
306 </object>
307 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="${9:myvideo.webm}">下载视频</a>
308 </video>'
309 end
310
311 snippet t(:script_w_external_source) do |s|
312 s.trigger = 'scsrc'
313 s.expansion = '<script src="$1" type="text/javascript" charset="${3:utf-8}"></script>'
314 s.needApplyReContentAssist = true
315 end
316
317 snippet 'Script' do |s|
318 s.trigger = 'script'
319 s.expansion = '<script type="text/javascript" charset="utf-8">
320 $0
321 </script>'
322 end
323
324 snippet 'style' do |s|
325 s.trigger = 'style'
326 s.expansion = '<style type="text/css">
327 $0
328 </style>'
329 end
330
331 snippet '<!DOCTYPE html>' do |s|
332 s.trigger = 'doctype'
333 s.expansion = '<!DOCTYPE HTML>'
334 end
335
336 snippet 'html' do |s|
337 s.trigger = 'html'
338 s.expansion = '<html>
339 <head>
340 <title>$0</title>
341 </head>
342 <body>
343
344 </body>
345 </html>'
346 end
347
348 snippet 'h1' do |s|
349 s.trigger = 'h1'
350 s.expansion = '<h1>$0</h1>'
351 end
352
353 snippet 'h2' do |s|
354 s.trigger = 'h2'
355 s.expansion = '<h2>$0</h2>'
356 end
357
358 snippet 'h3' do |s|
359 s.trigger = 'h3'
360 s.expansion = '<h3>$0</h3>'
361 end
362
363 snippet 'h4' do |s|
364 s.trigger = 'h4'
365 s.expansion = '<h4>$0</h4>'
366 end
367
368 snippet 'h5' do |s|
369 s.trigger = 'h5'
370 s.expansion = '<h5>$0</h5>'
371 end
372
373 snippet 'h6' do |s|
374 s.trigger = 'h6'
375 s.expansion = '<h6>$0</h6>'
376 end
377
378 snippet 'table' do |s|
379 s.trigger = 'table'
380 s.expansion = '<table border="$1" cellspacing="$2" cellpadding="$3">
381 <tr><th>${4:Header}</th></tr>
382 <tr><td>${5:Data}</td></tr>
383 </table>'
384 end
385
386 snippet 'head' do |cmd|
387 cmd.trigger = 'head'
388 cmd.expansion = "<head>
389 <meta charset=\"utf-8\"/>
390 <title>$1</title>
391
392 </head>"
393 end
394
395 snippet 'body' do |cmd|
396 cmd.trigger = 'body'
397 cmd.expansion = "<body>
398 $0
399 </body>"
400 end
401
402 snippet 'div' do |cmd|
403 cmd.trigger = 'div'
404 cmd.needApplyReContentAssist = true
405 cmd.expansion = "<div class=\"$1\">
406 $0
407 </div>"
408 end
409
410 snippet 'span' do |cmd|
411 cmd.trigger = 'span'
412 cmd.needApplyReContentAssist = true
413 cmd.expansion = "<span id=\"$1\">
414 $0
415 </span>"
416 end
417
418 snippet 'fieldset' do |cmd|
419 cmd.trigger = 'fieldset'
420 cmd.expansion = "<fieldset id=\"$2\">
421 <legend>$1</legend>
422
423 $0
424 </fieldset>"
425 end
426
427 end # End Snippets with scope 'text.html text'
428
429 # -----------------------------------------------------------------------------------
430 # Snippets that used env vars and needed to be converted to commands
431 with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle|
432
433 command t(:quick_br) do |cmd|
434 cmd.key_binding = 'M2+ENTER'
435 cmd.output = :insert_as_snippet
436 cmd.input = :none
437 cmd.invoke { "<br />" }
438 end
439
440 command t(:quick_html_space) do |cmd|
441 cmd.key_binding = 'M2+SPACE'
442 cmd.output = :insert_as_snippet
443 cmd.input = :none
444 cmd.invoke { " " }
445 end
446
447 command t(:emphasize) do |cmd|
448 cmd.key_binding = 'M1+M2+I'
449 cmd.input = :selection
450 cmd.invoke do |context|
451 selection = ENV['TM_SELECTED_TEXT'] || ''
452 if selection.length > 0
453 "<em>${1:#{selection}}</em>"
454 else
455 "<em>$0</em>"
456 end
457 end
458 end
459
460 command t(:strong) do |cmd|
461 cmd.key_binding = 'M1+M2+B'
462 cmd.input = :selection
463 cmd.invoke do |context|
464 selection = ENV['TM_SELECTED_TEXT'] || ''
465 if selection.length > 0
466 "<strong>${1:#{selection}}</strong>"
467 else
468 "<strong>$0</strong>"
469 end
470 end
471 end
472
473 command t(:wrap_selection_in_tag_pair) do |cmd|
474 cmd.key_binding = "CONTROL+9"
475 cmd.input = :selection
476 cmd.invoke do |context|
477 selection = ENV['TM_SELECTED_TEXT'] || ''
478 if selection.length > 0
479 "<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"
480 else
481 "<${1:p}>$0</${1:p}>"
482 end
483 end
484 end
485 end #end of 'text.html - source'
486
487 with_defaults :scope => 'text.html text', :input => :none, :output => :insert_as_snippet do |bundle|
488 command t(:ie_6_and_below) do |cmd|
489 cmd.trigger = '!'
490 cmd.invoke do |context|
491 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 6 and below '
492 "<!--[if lte IE 6]>${1:#{value}}<![endif]-->$0"
493 end
494 end
495
496 command t(:ie_6) do |cmd|
497 cmd.trigger = '!'
498 cmd.invoke do |context|
499 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 6 only '
500 "<!--[if IE 6]>${1:#{value}}<![endif]-->$0"
501 end
502 end
503
504 command t(:ie_7_and_above) do |cmd|
505 cmd.trigger = '!'
506 cmd.invoke do |context|
507 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 7 and above '
508 "<!--[if gte IE 7]>${1:#{value}}<![endif]-->$0"
509 end
510 end
511
512 command t(:ie_8_and_above) do |cmd|
513 cmd.trigger = '!'
514 cmd.invoke do |context|
515 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 8 and above '
516 "<!--[if gte IE 8]>${1:#{value}}<![endif]-->$0"
517 end
518 end
519
520 command t(:ie_9_and_above) do |cmd|
521 cmd.trigger = '!'
522 cmd.invoke do |context|
523 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 9 and above '
524 "<!--[if gte IE 9]>${1:#{value}}<![endif]-->$0"
525 end
526 end
527
528 command t(:ie) do |cmd|
529 cmd.trigger = '!'
530 cmd.invoke do |context|
531 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer '
532 "<!--[if IE]>${1:#{value}}<![endif]-->$0"
533 end
534 end
535
536 command t(:not_ie) do |cmd|
537 cmd.trigger = '!'
538 cmd.invoke do |context|
539 value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: NOT Internet Explorer '
540 "<!--[if !IE]><!-->${1:#{value}}<!-- <![endif]-->$0"
541 end
542 end
543
544 command t(:wrap_in_jsp_tag) do |cmd|
545 cmd.scope = 'text.html string'
546 cmd.invoke {|context| "<?= #{ENV['TM_SELECTED_TEXT']} ?>" }
547 end
548 end
