|
|
<!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> |