custom-keyboard-shortcuts.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Custom keyboard shortcuts - 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>Custom keyboard shortcuts</h1>
  14. </header>
  15. <div id="test-editormd">
  16. <textarea style="display:none;">#### Default
  17. > If Editor.md code editor is on focus, you can use keyboard shortcuts.
  18. > Editor.md have the default keyboard shortcuts handle. Plaese open the help dialog, can see all default keyboard shortcuts.
  19. #### Example
  20. ```javascript
  21. var testEditor = editormd("test-editormd", {
  22. width: "90%",
  23. height: 720,
  24. path : '../lib/',
  25. disabledKeyMaps : [
  26. "Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
  27. ],
  28. onload : function() {
  29. var keyMap = {
  30. "Ctrl-S": function(cm) {
  31. alert("Ctrl+S");
  32. },
  33. "Ctrl-A": function(cm) { // default Ctrl-A selectAll
  34. // custom
  35. alert("Ctrl+A");
  36. cm.execCommand("selectAll");
  37. }
  38. };
  39. // setting signle key
  40. var keyMap2 = {
  41. "Ctrl-T": function(cm) {
  42. alert("Ctrl+T");
  43. }
  44. };
  45. this.addKeyMap(keyMap);
  46. this.addKeyMap(keyMap2);
  47. this.removeKeyMap(keyMap2); // remove signle key
  48. }
  49. });
  50. ```
  51. </textarea>
  52. </div>
  53. </div>
  54. <script src="js/jquery.min.js"></script>
  55. <script src="../editormd.js"></script>
  56. <script type="text/javascript">
  57. var testEditor;
  58. $(function() {
  59. var widgets = [];
  60. testEditor = editormd("test-editormd", {
  61. width: "90%",
  62. height: 720,
  63. path : '../lib/',
  64. disabledKeyMaps : [
  65. "Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
  66. ],
  67. onchange : function() {
  68. $("#test").remove();
  69. var cm = this.cm;
  70. var cursor = cm.getCursor();
  71. //cm.replaceSelection("@");
  72. widgets.push(cm.addWidget({line : cursor.line, ch : cursor.ch}, $("<p style='z-index:100000;background:red;color:#fff;padding:5px;' id='test'>fsdfsdfsdf</p>")[0], true));
  73. console.log(cm.getCursor(), cm.getLine(cursor.line), cm.getLineTokens(cursor.line));
  74. },
  75. onload : function() {
  76. var keyMap = {
  77. "Ctrl-S": function(cm) {
  78. alert("Ctrl+S");
  79. //return false;
  80. },
  81. "Ctrl-A": function(cm) { // default Ctrl-A selectAll
  82. // custom
  83. alert("Ctrl+A");
  84. cm.execCommand("selectAll");
  85. },
  86. //"Shift-2" : function(cm){
  87. //}
  88. };
  89. this.cm.on("keyup", function(cm){
  90. //$("#test").remove();
  91. });
  92. // setting signle key
  93. var keyMap2 = {
  94. "Ctrl-T": function(cm) {
  95. alert("Ctrl+T");
  96. }
  97. };
  98. this.addKeyMap(keyMap);
  99. this.addKeyMap(keyMap2);
  100. this.removeKeyMap(keyMap2); // remove signle key
  101. }
  102. });
  103. });
  104. </script>
  105. </body>
  106. </html>