index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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-xdemo" ref="importLink" @click="importContent">导入{{codeType}}文件</span>
  19. <span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{toolName[nextCodeType]}}&gt;&gt;</span>
  20. </h3>
  21. </div>
  22. </div>
  23. <div class="panel-body mod-endecode">
  24. <div class="row">
  25. <textarea class="form-control mod-textarea ui-mb-10" id="srcText" ref="srcText" v-model="sourceContent" @input="convert"
  26. placeholder="粘贴或输入需要进行转换的内容"></textarea>
  27. </div>
  28. <div id="rst" class="row ui-mt-10" v-show="resultContent.length > 0">
  29. <a href="#" class="x-xdemo" style="margin-left: 0" @click="preview" v-html="previewText"></a>
  30. <a href="#" class="x-xdemo" @click="exportContent" title="在打印设置中,务必选择「PDF」">导出为PDF</a>
  31. <hr>
  32. <textarea class="mod-textarea" id="rstCode" ref="rstCode" v-model="resultContent" @click="getResult" v-show="!showPreview"></textarea>
  33. <div class="x-preview" v-show="showPreview" v-html="previewHTML"></div>
  34. </div>
  35. </div>
  36. <div class="html-demo hide" ref="htmlDemo">
  37. <h2 class="fe-function-title">FE助手</h2>
  38. <ul class="fe-function-list">
  39. <li class="-x-endecode" >
  40. <span>字符串编解码</span></li>
  41. <li class="-x-jsonformat">
  42. <span><code>Json</code>串格式化</span></li>
  43. <li class="-x-codebeautify">
  44. <span>代码美化工具</span></li>
  45. <li class="-x-codecompress">
  46. <span>代码压缩工具</span></li>
  47. <li class="-x-qrcode">
  48. <span>二维码生成器</span></li>
  49. <li class="-x-colorpicker">
  50. <span>页面取色工具</span></li>
  51. <li class="-x-regexp">
  52. <span>Js正则表达式</span></li>
  53. <li class="-x-timestamp">
  54. <span>时间(戳)转换</span></li>
  55. <li class="-x-base64">
  56. <span>图片Base64</span></li>
  57. <li class="-x-fcp">
  58. <span>编码规范检测</span></li>
  59. <li class="-x-loadtime">
  60. <span>页面性能检测</span></li>
  61. <li class="-x-markdown">
  62. <span>Html转<code>Markdown</code></span></li>
  63. <li class="-x-ajax-debugger">
  64. <span>Ajax调试:<strong>关</strong></span></li>
  65. </ul>
  66. </div>
  67. </div>
  68. <script type="text/javascript" src="index.js"></script>
  69. </body>
  70. </html>