kityFormulaDialog.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="renderer" content="webkit" />
  6. <link rel="stylesheet" href="kityformula/assets/styles/base.css" />
  7. <link rel="stylesheet" href="kityformula/assets/styles/ui.css" />
  8. <link rel="stylesheet" href="kityformula/assets/styles/scrollbar.css" />
  9. <style>
  10. html,
  11. body {
  12. padding: 0;
  13. margin: 0;
  14. }
  15. .kf-editor {
  16. width: 780px;
  17. height: 380px;
  18. }
  19. #loading {
  20. height: 32px;
  21. width: 340px;
  22. line-height: 32px;
  23. position: absolute;
  24. top: 42%;
  25. left: 50%;
  26. margin-left: -170px;
  27. font-family: arial, "Hiragino Sans GB", "Microsoft YaHei",
  28. "WenQuanYi Micro Hei", sans-serif;
  29. }
  30. #loading img {
  31. position: absolute;
  32. }
  33. #loading p {
  34. display: block;
  35. position: absolute;
  36. left: 40px;
  37. top: 0px;
  38. margin: 0;
  39. }
  40. </style>
  41. <title></title>
  42. </head>
  43. <body>
  44. <div id="kfEditorContainer" class="kf-editor">
  45. <div id="tips" class="tips">很抱歉,公式编辑器出故障了!</div>
  46. </div>
  47. <script src="kityformula/js/jquery-1.11.0.min.js"></script>
  48. <script src="kityformula/js/kitygraph.all.js"></script>
  49. <script src="kityformula/js/kity-formula-render.all.js"></script>
  50. <script src="kityformula/js/kity-formula-parser.all.min.js"></script>
  51. <script src="kityformula/js/kityformula-editor.all.min.js"></script>
  52. <script>
  53. jQuery(function ($) {
  54. if (document.body.addEventListener) {
  55. $("#tips").html(
  56. '<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载,请耐心等待...</p></div>'
  57. );
  58. var factory = kf.EditorFactory.create($("#kfEditorContainer")[0], {
  59. render: {
  60. fontsize: 30,
  61. padding: [0, 15, 0, 15],
  62. },
  63. resource: {
  64. path: "kityformula/resource/",
  65. },
  66. });
  67. factory.ready(function (KFEditor) {
  68. var initEditor = function (KFEditor) {
  69. $("#tips").remove();
  70. console.log(window.parent);
  71. var sel = window.parent.getSelection();
  72. var contents = "";
  73. if (sel.getRangeAt && sel.rangeCount) {
  74. var range = sel.getRangeAt(0);
  75. contents = range.cloneContents();
  76. }
  77. var image = "";
  78. console.dir(contents);
  79. if (contents && contents.childNodes) {
  80. for (
  81. let i = 0, len = contents.childNodes.length;
  82. i < len;
  83. i++
  84. ) {
  85. var el = contents.childNodes[i];
  86. if (el.tagName === "IMG" && el.getAttribute("data-latex")) {
  87. image = el;
  88. break;
  89. }
  90. }
  91. }
  92. var imgLatex = image && el.getAttribute("data-latex");
  93. KFEditor.execCommand("render", imgLatex || "\\placeholder");
  94. KFEditor.execCommand("focus");
  95. window.kfe = KFEditor;
  96. };
  97. initEditor(KFEditor);
  98. });
  99. } else {
  100. $("#tips").css("color", "black");
  101. $("#tips").css("padding", "10px");
  102. }
  103. });
  104. </script>
  105. </body>
  106. </html>