set-get-replace-selection.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本 - 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>插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本</h1>
  14. <p>Insert value & Set / Get cursor & Set / Get / Replace selection</p>
  15. <br/>
  16. <div class="btns" style="margin:0">
  17. <button id="btn1">设置光标位置 (line:1, ch:2)</button>
  18. <button id="btn2">获取光标位置</button>
  19. <button id="btn3">设置选中文本 ({line:1, ch:0}, {line:5, ch:100})</button>
  20. <button id="btn4">获取选中文本</button>
  21. <button id="btn5">替换选中文本为 "$$$$$$$$$"</button>
  22. <button id="btn6">在光标处插入 "????"</button>
  23. </div>
  24. </header>
  25. <div id="test-editormd">
  26. <textarea style="display:none;">### Examples
  27. ```javascript
  28. var testEditormd;
  29. $(function() {
  30. testEditormd = editormd("test-editormd", {
  31. width: "90%",
  32. height: 640,
  33. path : '../lib/'
  34. });
  35. });
  36. $("#btn1").click(function(){
  37. testEditormd.setCursor({line:1, ch:2});
  38. });
  39. $("#btn2").click(function(){
  40. console.log("getCursor =>", testEditormd.getCursor());
  41. });
  42. $("#btn3").click(function(){
  43. testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100});
  44. });
  45. $("#btn4").click(function(){
  46. console.log("getSelection =>", testEditormd.getSelection());
  47. });
  48. $("#btn5").click(function(){
  49. testEditormd.replaceSelection("$$$$$$$$$");
  50. });
  51. $("#btn6").click(function(){
  52. testEditormd.insertValue("????");
  53. });
  54. ```
  55. </textarea>
  56. </div>
  57. </div>
  58. <script src="js/jquery.min.js"></script>
  59. <script src="../editormd.js"></script>
  60. <script type="text/javascript">
  61. var testEditormd;
  62. $(function() {
  63. testEditormd = editormd("test-editormd", {
  64. width: "90%",
  65. height: 640,
  66. path : '../lib/'
  67. });
  68. $("#btn1").click(function(){
  69. testEditormd.setCursor({line:1, ch:2});
  70. testEditormd.focus();
  71. });
  72. $("#btn2").click(function(){
  73. console.log("getCursor =>", testEditormd.getCursor());
  74. testEditormd.focus();
  75. });
  76. $("#btn3").click(function(){
  77. testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100});
  78. testEditormd.focus();
  79. });
  80. $("#btn4").click(function(){
  81. console.log("getSelection =>", testEditormd.getSelection());
  82. testEditormd.focus();
  83. });
  84. $("#btn5").click(function(){
  85. testEditormd.replaceSelection("$$$$$$$$$");
  86. testEditormd.focus();
  87. });
  88. $("#btn6").click(function(){
  89. testEditormd.insertValue("????");
  90. testEditormd.focus();
  91. });
  92. });
  93. </script>
  94. </body>
  95. </html>