kityFormulaDialog.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. <!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
  48. <!--internal.js默认是放到dialogs目录下的-->
  49. <script type="text/javascript" src="../dialogs/internal.js"></script>
  50. <script src="kityformula/js/jquery-1.11.0.min.js"></script>
  51. <script src="kityformula/js/kitygraph.all.js"></script>
  52. <script src="kityformula/js/kity-formula-render.all.js"></script>
  53. <script src="kityformula/js/kity-formula-parser.all.min.js"></script>
  54. <script src="kityformula/js/kityformula-editor.all.min.js"></script>
  55. <script>
  56. jQuery( function ($) {
  57. if ( document.body.addEventListener ) {
  58. $( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载,请耐心等待...</p></div>' );
  59. var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {
  60. render: {
  61. fontsize: 18
  62. },
  63. resource: {
  64. path: "./kityformula/resource/"
  65. }
  66. } );
  67. factory.ready( function ( KFEditor ) {
  68. $( "#tips").remove();
  69. // this指向KFEditor
  70. var rng = editor.selection.getRange(),
  71. img = rng.getClosedNode(),
  72. imgLatex = img && unescape($(img).attr('data-latex')).replace(/(^(\\\[)*)|(\\\]*$)/g, "");
  73. if(sessionStorage.editKityFormula){
  74. var editKityFormula = JSON.parse(sessionStorage.editKityFormula);
  75. if(editKityFormula.type==1){
  76. imgLatex = (decodeURIComponent(editKityFormula.latexUse));
  77. sessionStorage.removeItem(editKityFormula);
  78. }
  79. }
  80. this.execCommand( "render", imgLatex || "\\placeholder" );
  81. this.execCommand( "focus" );
  82. window.kfe = this;
  83. } );
  84. dialog.onok = function(){
  85. kfe.execCommand('get.image.data', function(data){
  86. var latex = kfe.execCommand('get.source');
  87. editor.execCommand('inserthtml', '<img class="kfformula gsImgLatex" src="'+ data.img +'" data-latex="' + latex + '" />');
  88. dialog.close();
  89. });
  90. return false;
  91. }
  92. } else {
  93. $( "#tips").css( "color", "black" );
  94. $( "#tips").css( "padding", "10px" );
  95. }
  96. } );
  97. </script>
  98. </body>
  99. </html>