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