sync-scrolling.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Sync scrolling - 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>Sync scrolling</h1>
  14. </header>
  15. <div class="btns">
  16. <button class="bisync-btn">Bisynchronous (Default)</button>
  17. <button class="single-btn">Single</button>
  18. <button class="disabled-btn">Disabled</button>
  19. </div>
  20. <div id="test-editormd">
  21. <textarea style="display:none;">[TOC]
  22. #### Setting
  23. config:
  24. ```javascript
  25. {
  26. // true -> bisync, false -> disabled, "single" -> Only editor area sync
  27. syncScrolling : true | false | "single"
  28. }
  29. ```
  30. function:
  31. ```javascript
  32. editor.config("syncScrolling", true);
  33. //editor.config("syncScrolling", false);
  34. //editor.config("syncScrolling", "single");
  35. ```
  36. </textarea>
  37. </div>
  38. </div>
  39. <script src="js/jquery.min.js"></script>
  40. <script src="../editormd.min.js"></script>
  41. <script type="text/javascript">
  42. var testEditor;
  43. $(function() {
  44. testEditor = editormd("test-editormd", {
  45. width : "90%",
  46. height : 360,
  47. path : "../lib/"
  48. });
  49. $(".bisync-btn").click(function(){
  50. testEditor.config("syncScrolling", true);
  51. });
  52. $(".single-btn").click(function(){
  53. testEditor.config("syncScrolling", "single");
  54. });
  55. $(".disabled-btn").click(function(){
  56. testEditor.config("syncScrolling", false);
  57. });
  58. });
  59. </script>
  60. </body>
  61. </html>