| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 | <!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="../../third-party/mathquill/mathquill.css"/>    <style>        html, body, .main{            margin: 0;            padding: 0;            overflow: hidden;        }        .main{            width:1024px;            height:1024px;        }        .mathquill-editable,        .mathquill-rendered-math{            border: 0px;            padding: 0px;            margin:4px;        }    </style></head><body><div class="main">    <div class="mathquill-editable"></div></div><div>    <input id="blurHelper" /></div><script src="../../third-party/jquery.min.js"></script><script src="../../third-party/mathquill/mathquill.js"></script><script>    $(function(){        var UM = parent.UM,            $iframe = $(getSelfIframe()),            editorId = $iframe.parents('.edui-body-container').attr('id'),            editor = UM.getEditor(editorId),            timer;        /* 获得当前公式所在的iframe节点 */        function getSelfIframe(){            var iframes = parent.document.getElementsByTagName('iframe');            for (var key in iframes) {                if (iframes[key].contentWindow == window) {                    return iframes[key];                }            }            return null;        }        /* 获得当前url上的hash存储的参数值 */        function getLatex() {            return $iframe.attr('data-latex') || '';        }        /* 保存场景 */        function saveScene(){            timer && clearTimeout(timer);            timer = setTimeout(function(){                editor.fireEvent('savescene');                editor.fireEvent('contentchange');                editor.fireEvent('selectionchange');                timer = null;            }, 300);        }        /* 设置编辑器可编辑 */        function enableEditor(){            if(editor.body.contentEditable == 'false') {                editor.setEnabled();            }        }        /* 设置编辑器不可编辑 */        function disableEditor(){            if(editor.body.contentEditable == 'true') {                editor.setDisabled(['undo', 'redo', 'preview', 'formula'], true);            }        }        /* 公式 */        var Formula = function(){            var _this = this,                latex = getLatex();            this.isFocus = false;            this.isDisabled = false;            /* 加载公式内容 */            this.$mathquill = $('.mathquill-editable').mathquill('latex', latex);            /* 设置活动状态的公式iframe */            this.$mathquill.on('mousedown', function(){                /* 编辑器不可用时,公式也不可用 */                if(_this.disabled) return false;                /* 第一次点击当前公式,设置公式活动 */                if(!$iframe.hasClass('edui-formula-active')) {                    disableEditor();                    editor.blur();                    editor.$body.find('iframe').not($iframe).each(function(k, v){                        v.contentWindow.formula.blur();                    });                    if(_this.$mathquill.find('.cursor').css('display') == 'none') {                        _this.refresh();                        _this.$mathquill.addClass('hasCursor');                    }                }                _this.focus();            });            editor.addListener('click', function(){                _this.blur();                enableEditor();            });            /* 里面focus,编辑器也判断为focus */            editor.addListener('isFocus', function(){                return _this.isFocus;            });            /* um不可用,公式也不可编辑 */            editor.addListener('setDisabled', function(type, except){                if (!(except && except.join(' ').indexOf('formula') != -1) && _this.isDisabled != true ) {                    _this.setDisabled();                }            });            editor.addListener('setEnabled', function(){                if (_this.isDisabled != false) {                    _this.setEnabled();                }            });            /* 设置更新外层iframe的大小和属性 */            $(document.body).on('keydown', function(){                _this.updateIframe();            }).on('keyup', function(){                _this.updateIframe();            });            /* 清除初始化的高亮状态 */            this.$mathquill.removeClass('hasCursor');            /* 初始化后延迟刷新外层iframe大小 */            setTimeout(function(){                _this.updateIframe();            }, 300);        };        Formula.prototype = {            focus:function(){                $iframe.addClass('edui-formula-active');                this.isFocus = true;            },            blur:function(){                $iframe.removeClass('edui-formula-active');                this.removeCursor();                this.isFocus = false;            },            removeCursor: function(){                this.$mathquill.find('span.cursor').hide();                this.$mathquill.parent().find('.hasCursor').removeClass('hasCursor');            },            updateIframe: function(){                $iframe.width(this.$mathquill.width()+8).height(this.$mathquill.height()+8);                var latex = $iframe.attr('data-latex'),                    newLatex = this.getLatex();                if(latex != newLatex) {                    $iframe.attr('data-latex', this.getLatex());                    saveScene();                }            },            insertLatex: function(latex){                this.$mathquill.mathquill('write', latex);                this.updateIframe();                this.removeCursor();            },            setLatex: function(latex){                this.$mathquill.mathquill('latex', latex);                this.updateIframe();            },            getLatex: function(){                return this.$mathquill.mathquill('latex');            },            redraw: function(){                this.$mathquill.mathquill('redraw');            },            setDisabled: function(){                this.blur();                var latex = this.getLatex();                this.$mathquill.mathquill('revert').text(latex).mathquill();                this.updateIframe();                this.isDisabled = true;            },            setEnabled: function(){                this.$mathquill.removeClass('mathquill-rendered-math');                this.refresh();                this.isDisabled = false;            },            refresh: function(){                var latex = this.getLatex();                this.$mathquill.mathquill('revert').text(latex).mathquill('editable');                this.updateIframe();            }        };        /* 绑定到window上,给上级window调用 */        window.formula = new Formula();    });</script></body></html>
 |