kityFormula.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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, body {
  11. padding: 0;
  12. margin: 0;
  13. }
  14. .kf-editor {
  15. width: 780px;
  16. height: 380px;
  17. }
  18. #loading {
  19. height: 32px;
  20. width: 340px;
  21. line-height: 32px;
  22. position: absolute;
  23. top: 42%;
  24. left: 50%;
  25. margin-left: -170px;
  26. font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  27. }
  28. #loading img {
  29. position: absolute;
  30. }
  31. #loading p {
  32. display: block;
  33. position: absolute;
  34. left: 40px;
  35. top: 0px;
  36. margin: 0;
  37. }
  38. </style>
  39. <title></title>
  40. </head>
  41. <body>
  42. <div id="kfEditorContainer" class="kf-editor">
  43. <div id="tips" class="tips">
  44. sorry! Beta版本仅支持IE9及以上版本的浏览器,正式版本将会支持低版本浏览器,谢谢您的关注!
  45. </div>
  46. </div>
  47. <script src="kityformula/js/jquery-3.6.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. //获取url地址栏传参
  54. function getQueryVariable(variable){
  55. var query = window.location.search.substring(1);
  56. var vars = query.split("&");
  57. for (var i=0;i<vars.length;i++) {
  58. var pair = vars[i].split("=");
  59. if(pair[0] == variable){return pair[1];}
  60. }
  61. return(false);
  62. }
  63. //处理TinyMCE编辑器的事件
  64. window.addEventListener('message', function (event) {
  65. var data = event.data;
  66. kfe.execCommand('get.image.data', function(data){
  67. var latex = kfe.execCommand('get.source');
  68. window.parent.postMessage({
  69. mceAction: 'insertContent',
  70. content: "<img src=\""+data.img+"\" data-latex=\""+latex+"\">"
  71. }, '*');
  72. window.parent.postMessage({
  73. mceAction: 'close'
  74. }, '*');
  75. });
  76. });
  77. //实例化编辑器
  78. jQuery( function ($) {
  79. if ( document.body.addEventListener ) {
  80. $( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载,请耐心等待...</p></div>' );
  81. var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {
  82. render: {
  83. fontsize: 24
  84. },
  85. resource: {
  86. path: "./kityformula/resource/"
  87. }
  88. } );
  89. factory.ready( function ( KFEditor ) {
  90. $( "#tips").remove();
  91. //处理地址栏的参数并加载到编辑器中
  92. var c=getQueryVariable("c")
  93. if(c){
  94. this.execCommand( "render",decodeURIComponent(c) );
  95. }else{
  96. this.execCommand( "render","\\placeholder" );
  97. };
  98. this.execCommand( "focus" );
  99. window.kfe = this;
  100. } );
  101. } else {
  102. $( "#tips").css( "color", "black" );
  103. $( "#tips").css( "padding", "10px" );
  104. }
  105. } );
  106. </script>
  107. </body>
  108. </html>