goto-line.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Goto line - Editor.md examples</title>
  6. <link rel="stylesheet" href="css/style.css" />
  7. <link rel="stylesheet" href="../css/editormd.css" />
  8. <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
  9. </head>
  10. <body>
  11. <div id="layout">
  12. <header>
  13. <h1>Goto line</h1>
  14. </header>
  15. <div class="btns">
  16. <button id="goto-line-btn">Goto line 90</button>
  17. <button id="goto-line-150-btn">Goto line 150</button>
  18. <button id="goto-line-240-btn">Goto line 240</button>
  19. <button id="goto-line-300-btn">Goto line 300</button>
  20. <button id="goto-line-400-btn">Goto line 400</button>
  21. <button id="goto-first-line-btn">Goto first line</button>
  22. <button id="goto-last-line-btn">Goto last line</button>
  23. </div>
  24. <div id="test-editormd"></div>
  25. </div>
  26. <script src="js/jquery.min.js"></script>
  27. <script src="../editormd.js"></script>
  28. <script type="text/javascript">
  29. var testEditor;
  30. $(function() {
  31. $.get("test.md", function(md){
  32. testEditor = editormd("test-editormd", {
  33. width : "90%",
  34. height : 740,
  35. path : "../lib/",
  36. markdown : md,
  37. codeFold : true,
  38. htmlDecode : "style,script,iframe",
  39. tex : true,
  40. emoji : true,
  41. taskList : true,
  42. flowChart : true,
  43. sequenceDiagram : true,
  44. //gotoLine : false // disabled
  45. });
  46. });
  47. $("#goto-line-btn").bind("click", function(){
  48. testEditor.gotoLine(90);
  49. });
  50. $("#goto-line-150-btn").bind("click", function(){
  51. testEditor.gotoLine(150);
  52. });
  53. $("#goto-line-240-btn").bind("click", function(){
  54. testEditor.gotoLine(240);
  55. });
  56. $("#goto-line-300-btn").bind("click", function(){
  57. testEditor.gotoLine(300);
  58. });
  59. $("#goto-line-400-btn").bind("click", function(){
  60. testEditor.gotoLine(400);
  61. });
  62. $("#goto-first-line-btn").bind("click", function(){
  63. testEditor.gotoLine("first");
  64. // or
  65. //testEditor.gotoLine(1);
  66. });
  67. $("#goto-last-line-btn").bind("click", function(){
  68. testEditor.gotoLine("last");
  69. // or
  70. //testEditor.gotoLine(testEditor.cm.lineCount());
  71. });
  72. });
  73. </script>
  74. </body>
  75. </html>