codemirror-test.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title>CodeMirror Test</title>
  5. <meta charset="UTF-8">
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <link rel="stylesheet" href="../examples/css/style.css" />
  9. </head>
  10. <body>
  11. <div id="layout">
  12. <textarea id="test" style="display:none;">###Hello world!</textarea>
  13. </div>
  14. <script src="../examples/js/jquery.min.js"></script>
  15. <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.min.css" />
  16. <script src="../lib/codemirror/lib/codemirror.min.js"></script>
  17. <script src="../lib/codemirror/addons.min.js"></script>
  18. <script src="../lib/codemirror/modes.min.js"></script>
  19. <!-- <script src="../lib/codemirror-5.0/addon/edit/closetag.js"></script>
  20. <script src="../lib/codemirror-5.0/addon/fold/xml-fold.js"></script>
  21. <script src="../lib/codemirror-5.0/mode/xml/xml.js"></script>
  22. <script src="../lib/codemirror-5.0/mode/javascript/javascript.js"></script>
  23. <script src="../lib/codemirror-5.0/mode/css/css.js"></script>
  24. <script src="../lib/codemirror-5.0/mode/htmlmixed/htmlmixed.js"></script>-->
  25. <!--<script src="../lib/codemirror/addons.min.js"></script>
  26. <script src="../lib/codemirror/modes.min.js"></script>
  27. <link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css">
  28. <link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css">
  29. <script src="../lib/codemirror/addon/dialog/dialog.js"></script>
  30. <script src="../lib/codemirror/addon/search/searchcursor.js"></script>
  31. <script src="../lib/codemirror/addon/search/search.js"></script>
  32. <script src="../lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
  33. <script src="../lib/codemirror/addon/search/matchesonscrollbar.js"></script>-->
  34. <style>
  35. html, body, #layout, .CodeMirror {
  36. width: 100%;
  37. height: 100%;
  38. overflow: hidden;
  39. }
  40. </style>
  41. <script type="text/javascript">
  42. $(function() {
  43. var codeMirrorConfig = {
  44. mode: "gfm",
  45. theme: "default",
  46. //tabSize: 4,
  47. //dragDrop: false,
  48. autoCloseTags : true,
  49. //autofocus: true,
  50. //indentUnit : 4,
  51. //lineNumbers: true,
  52. //lineWrapping: true,
  53. /*matchBrackets: true,
  54. indentWithTabs: true,
  55. styleActiveLine: true,
  56. styleSelectedText: true,
  57. autoCloseBrackets: true,
  58. showTrailingSpace: true,
  59. highlightSelectionMatches: {
  60. showToken: /\w/
  61. } */
  62. };
  63. $.get("../examples/test.md", function(md){
  64. $("#test").html(md);
  65. var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
  66. var codeMirror = $(".CodeMirror");
  67. });
  68. });
  69. </script>
  70. </body>
  71. </html>