index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>HTML转Markdown工具</title>
  5. <meta charset="UTF-8">
  6. <link rel="stylesheet" href="index.css" />
  7. <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
  8. <script src="../static/vendor/require/require.js"></script>
  9. </head>
  10. <body>
  11. <div class="wrapper" id="pageContainer">
  12. <div class="panel panel-default" style="margin-bottom: 0px;">
  13. <div class="panel-heading">
  14. <h3 class="panel-title">
  15. <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
  16. <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:{{toolName[codeType]}}
  17. <span class="x-xdemo" ref="demoLink1" @click="setDemo">示例:{{codeType}}片段</span>
  18. <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{toolName[nextCodeType]}}&gt;&gt;</span>
  19. </h3>
  20. </div>
  21. </div>
  22. <div class="panel-body mod-endecode">
  23. <div class="row">
  24. <textarea class="form-control mod-textarea ui-mb-10" id="srcText" ref="srcText" v-model="sourceContent" @input="convert"
  25. placeholder="粘贴或输入需要进行转换的内容"></textarea>
  26. </div>
  27. <div id="rst" class="row ui-mt-10" v-show="resultContent.length > 0">
  28. <a href="#" @click="preview" v-html="previewText"></a><hr>
  29. <textarea class="mod-textarea" id="rstCode" ref="rstCode" v-model="resultContent" @click="getResult" v-show="!showPreview"></textarea>
  30. <div class="x-preview" v-show="showPreview" v-html="previewHTML"></div>
  31. </div>
  32. </div>
  33. <div class="html-demo hide" ref="htmlDemo">
  34. <h2 class="fe-function-title">FE助手</h2>
  35. <ul class="fe-function-list">
  36. <li class="-x-endecode" >
  37. <span>字符串编解码</span></li>
  38. <li class="-x-jsonformat">
  39. <span><code>Json</code>串格式化</span></li>
  40. <li class="-x-codebeautify">
  41. <span>代码美化工具</span></li>
  42. <li class="-x-codecompress">
  43. <span>代码压缩工具</span></li>
  44. <li class="-x-qrcode">
  45. <span>二维码生成器</span></li>
  46. <li class="-x-colorpicker">
  47. <span>页面取色工具</span></li>
  48. <li class="-x-regexp">
  49. <span>Js正则表达式</span></li>
  50. <li class="-x-timestamp">
  51. <span>时间(戳)转换</span></li>
  52. <li class="-x-base64">
  53. <span>图片Base64</span></li>
  54. <li class="-x-fcp">
  55. <span>编码规范检测</span></li>
  56. <li class="-x-loadtime">
  57. <span>页面性能检测</span></li>
  58. <li class="-x-markdown">
  59. <span>Html转<code>Markdown</code></span></li>
  60. <li class="-x-ajax-debugger">
  61. <span>Ajax调试:<strong>关</strong></span></li>
  62. </ul>
  63. </div>
  64. </div>
  65. <script type="text/javascript" src="index.js"></script>
  66. </body>
  67. </html>