|
@@ -0,0 +1,112 @@
|
|
|
|
+<!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">很抱歉,公式编辑器出故障了!</div>
|
|
|
|
+ </div>
|
|
|
|
+ <script src="kityformula/js/jquery-1.11.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>
|
|
|
|
+ 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: 30,
|
|
|
|
+ padding: [0, 15, 0, 15],
|
|
|
|
+ },
|
|
|
|
+ resource: {
|
|
|
|
+ path: "kityformula/resource/",
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ factory.ready(function (KFEditor) {
|
|
|
|
+ var initEditor = function (KFEditor) {
|
|
|
|
+ $("#tips").remove();
|
|
|
|
+ console.log(window.parent);
|
|
|
|
+ var sel = window.parent.getSelection();
|
|
|
|
+ var contents = "";
|
|
|
|
+ if (sel.getRangeAt && sel.rangeCount) {
|
|
|
|
+ var range = sel.getRangeAt(0);
|
|
|
|
+ contents = range.cloneContents();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var image = "";
|
|
|
|
+ console.dir(contents);
|
|
|
|
+ if (contents && contents.childNodes) {
|
|
|
|
+ for (
|
|
|
|
+ let i = 0, len = contents.childNodes.length;
|
|
|
|
+ i < len;
|
|
|
|
+ i++
|
|
|
|
+ ) {
|
|
|
|
+ var el = contents.childNodes[i];
|
|
|
|
+ if (el.tagName === "IMG" && el.getAttribute("data-latex")) {
|
|
|
|
+ image = el;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ var imgLatex = image && el.getAttribute("data-latex");
|
|
|
|
+
|
|
|
|
+ KFEditor.execCommand("render", imgLatex || "\\placeholder");
|
|
|
|
+ KFEditor.execCommand("focus");
|
|
|
|
+
|
|
|
|
+ window.kfe = KFEditor;
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ initEditor(KFEditor);
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ $("#tips").css("color", "black");
|
|
|
|
+ $("#tips").css("padding", "10px");
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ </script>
|
|
|
|
+ </body>
|
|
|
|
+</html>
|