kityFormula.html 3.5 KB
Newer Older
lakernote's avatar
lakernote 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="kityformula/assets/styles/base.css">
    <link rel="stylesheet" href="kityformula/assets/styles/ui.css">
    <link rel="stylesheet" href="kityformula/assets/styles/scrollbar.css">
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .kf-editor {
            width: 780px;
            height: 380px;
        }
        #loading {
            height: 32px;
            width: 340px;
            line-height: 32px;
            position: absolute;
            top: 42%;
            left: 50%;
            margin-left: -170px;
            font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        #loading img {
            position: absolute;
        }
        #loading p {
            display: block;
            position: absolute;
            left: 40px;
            top: 0px;
            margin: 0;
        }

    </style>
    <title></title>
</head>
<body>
    <div id="kfEditorContainer" class="kf-editor">
        <div id="tips" class="tips">
            sorry! Beta版本仅支持IE9及以上版本的浏览器,正式版本将会支持低版本浏览器,谢谢您的关注!
        </div>
    </div>

<script src="kityformula/js/jquery-3.6.0.min.js"></script>
<script src="kityformula/js/kitygraph.all.js"></script>
<script src="kityformula/js/kity-formula-render.all.js"></script>
<script src="kityformula/js/kity-formula-parser.all.min.js"></script>
<script src="kityformula/js/kityformula-editor.all.min.js"></script>
<script>
//获取url地址栏传参
function getQueryVariable(variable){
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
    }
    return(false);
}
//处理TinyMCE编辑器的事件
window.addEventListener('message', function (event) {
  var data = event.data;
  kfe.execCommand('get.image.data', function(data){
        var latex = kfe.execCommand('get.source');
        window.parent.postMessage({
            mceAction: 'insertContent',
            content: "<img src=\""+data.img+"\" data-latex=\""+latex+"\">"
        }, '*');
        window.parent.postMessage({
            mceAction: 'close'
        }, '*');
    });
});
//实例化编辑器
jQuery( function ($) {
    if ( document.body.addEventListener ) {
        $( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载,请耐心等待...</p></div>' );
        var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {
            render: {
                fontsize: 24
            },
            resource: {
                path: "./kityformula/resource/"
            }
        } );
        factory.ready( function ( KFEditor ) {
            $( "#tips").remove();
            //处理地址栏的参数并加载到编辑器中
            var c=getQueryVariable("c")
            if(c){
                this.execCommand( "render",decodeURIComponent(c) );
            }else{
                this.execCommand( "render","\\placeholder" );
            };

            this.execCommand( "focus" );
            window.kfe = this;
        } );
    } else {
        $( "#tips").css( "color", "black" );
        $( "#tips").css( "padding", "10px" );
    }
} );
</script>
</body>
</html>