PHPIndex

UE.registerUI('kityformula', function(editor, uiname){

    // 创建dialog
    var kfDialog = new UE.ui.Dialog({

        // 指定弹出层路径
        iframeUrl: editor.options.UEDITOR_HOME_URL + 'kityformula-plugin/kityFormulaDialog.html',
        // 编辑器实例
        editor: editor,
        // dialog 名称
        name: uiname,
        // dialog 标题
        title: '插入公式 - KityFormula',

        // dialog 外围 css
        cssRules: 'width:783px; height: 386px;',

        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    kfDialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    kfDialog.close(false);
                }
            }
        ]});

    editor.ready(function(){
        UE.utils.cssRule('kfformula', 'img.kfformula{vertical-align: middle;}', editor.document);
    });

    var iconUrl = editor.options.UEDITOR_HOME_URL + 'kityformula-plugin/kf-icon.png';
    var tmpLink = document.createElement('a');
    tmpLink.href = iconUrl;
    tmpLink.href = tmpLink.href;
    iconUrl = tmpLink.href;

    var kfBtn = new UE.ui.Button({
        name:'插入' + uiname,
        title:'插入公式-' + uiname,
        //需要添加的额外样式，指定icon图标
        cssRules :'background: url("' + iconUrl + '") !important',
        onclick:function () {
            //渲染dialog
            kfDialog.render();
            kfDialog.open();
        }
    });

    //当点到编辑内容上时，按钮要做的状态反射
    editor.addListener('selectionchange', function () {
        var state = editor.queryCommandState(uiname);
        if (state == -1) {
            kfBtn.setDisabled(true);
            kfBtn.setChecked(false);
        } else {
            kfBtn.setDisabled(false);
            kfBtn.setChecked(state);
        }
    });

    return kfBtn;


});

///import core
///plugin 编辑器默认的过滤转换机制

UE.plugins['defaultfilter'] = function () {
    var me = this;
    me.setOpt({
        'allowDivTransToP':true,
        'disabledTableInTable':true,
        'rgb2Hex':true
    });
    //默认的过滤处理
    //进入编辑器的内容处理
    me.addInputRule(function (root) {
        var allowDivTransToP = this.options.allowDivTransToP;
        var val;
        function tdParent(node){
            while(node && node.type == 'element'){
                if(node.tagName == 'td'){
                    return true;
                }
                node = node.parentNode;
            }
            return false;
        }
        //进行默认的处理
        root.traversal(function (node) {
            if (node.type == 'element') {
                if (!UE.dom.dtd.$cdata[node.tagName] && me.options.autoClearEmptyNode && UE.dom.dtd.$inline[node.tagName] && !UE.dom.dtd.$empty[node.tagName] && (!node.attrs || UE.utils.isEmptyObject(node.attrs))) {
                    if (!node.firstChild()) node.parentNode.removeChild(node);
                    else if (node.tagName == 'span' && (!node.attrs || UE.utils.isEmptyObject(node.attrs))) {
                        node.parentNode.removeChild(node, true)
                    }
                    return;
                }
                switch (node.tagName) {
                    case 'style':
                    case 'script':
                        node.setAttr({
                            cdata_tag: node.tagName,
                            cdata_data: (node.innerHTML() || ''),
                            '_ue_custom_node_':'true'
                        });
                        node.tagName = 'div';
                        node.innerHTML('');
                        break;
                    case 'a':
                        if (val = node.getAttr('href')) {
                            node.setAttr('_href', val)
                        }
                        break;
                    case 'img':
                        //todo base64暂时去掉，后边做远程图片上传后，干掉这个
//                        if (val = node.getAttr('src')) {
//                            if (/^data:/.test(val)) {
//                                node.parentNode.removeChild(node);
//                                break;
//                            }
//                        }
                        node.setAttr('_src', node.getAttr('src'));
                        break;
                    case 'span':
                        if (UE.browser.webkit && (val = node.getStyle('white-space'))) {
                            if (/nowrap|normal/.test(val)) {
                                node.setStyle('white-space', '');
                                if (me.options.autoClearEmptyNode && UE.utils.isEmptyObject(node.attrs)) {
                                    node.parentNode.removeChild(node, true)
                                }
                            }
                        }
                        val = node.getAttr('id');
                        if(val && /^_baidu_bookmark_/i.test(val)){
                            node.parentNode.removeChild(node)
                        }
                        break;
                    case 'p':
                        if (val = node.getAttr('align')) {
                            node.setAttr('align');
                            node.setStyle('text-align', val)
                        }
                        //trace:3431
//                        var cssStyle = node.getAttr('style');
//                        if (cssStyle) {
//                            cssStyle = cssStyle.replace(/(margin|padding)[^;]+/g, '');
//                            node.setAttr('style', cssStyle)
//
//                        }
                        //p标签不允许嵌套
                        UE.utils.each(node.children,function(n){
                            if(n.type == 'element' && n.tagName == 'p'){
                                var next = n.nextSibling();
                                node.parentNode.insertAfter(n,node);
                                var last = n;
                                while(next){
                                    var tmp = next.nextSibling();
                                    node.parentNode.insertAfter(next,last);
                                    last = next;
                                    next = tmp;
                                }
                                return false;
                            }
                        });
                        if (!node.firstChild()) {
                            node.innerHTML(UE.browser.ie ? '&nbsp;' : '<br/>')
                        }
                        break;
                    case 'div':
                        if(node.getAttr('cdata_tag')){
                            break;
                        }
                        //针对代码这里不处理插入代码的div
                        val = node.getAttr('class');
                        if(val && /^line number\d+/.test(val)){
                            break;
                        }
                        if(!allowDivTransToP){
                            break;
                        }
                        var tmpNode, p = UE.uNode.createElement('p');
                        while (tmpNode = node.firstChild()) {
                            if (tmpNode.type == 'text' || !UE.dom.UE.dom.dtd.$block[tmpNode.tagName]) {
                                p.appendChild(tmpNode);
                            } else {
                                if (p.firstChild()) {
                                    node.parentNode.insertBefore(p, node);
                                    p = UE.uNode.createElement('p');
                                } else {
                                    node.parentNode.insertBefore(tmpNode, node);
                                }
                            }
                        }
                        if (p.firstChild()) {
                            node.parentNode.insertBefore(p, node);
                        }
                        node.parentNode.removeChild(node);
                        break;
                    case 'dl':
                        node.tagName = 'ul';
                        break;
                    case 'dt':
                    case 'dd':
                        node.tagName = 'li';
                        break;
                    case 'li':
                        var className = node.getAttr('class');
                        if (!className || !/list\-/.test(className)) {
                            node.setAttr()
                        }
                        var tmpNodes = node.getNodesByTagName('ol ul');
                        UE.utils.each(tmpNodes, function (n) {
                            node.parentNode.insertAfter(n, node);
                        });
                        break;
                    case 'td':
                    case 'th':
                    case 'caption':
                        if(!node.children || !node.children.length){
                            node.appendChild(UE.browser.ie11below ? UE.uNode.createText(' ') : UE.uNode.createElement('br'))
                        }
                        break;
                    case 'table':
                        if(me.options.disabledTableInTable && tdParent(node)){
                            node.parentNode.insertBefore(UE.uNode.createText(node.innerText()),node);
                            node.parentNode.removeChild(node)
                        }
                }

            }
//            if(node.type == 'comment'){
//                node.parentNode.removeChild(node);
//            }
        })

    });

    //从编辑器出去的内容处理
    me.addOutputRule(function (root) {

        var val;
        root.traversal(function (node) {
            if (node.type == 'element') {

                if (me.options.autoClearEmptyNode && UE.dom.dtd.$inline[node.tagName] && !UE.dom.dtd.$empty[node.tagName] && (!node.attrs || UE.utils.isEmptyObject(node.attrs))) {

                    if (!node.firstChild()) node.parentNode.removeChild(node);
                    else if (node.tagName == 'span' && (!node.attrs || UE.utils.isEmptyObject(node.attrs))) {
                        node.parentNode.removeChild(node, true)
                    }
                    return;
                }
                switch (node.tagName) {
                    case 'div':
                        if (val = node.getAttr('cdata_tag')) {
                            node.tagName = val;
                            node.appendChild(UE.uNode.createText(node.getAttr('cdata_data')));
                            node.setAttr({cdata_tag: '', cdata_data: '','_ue_custom_node_':''});
                        }
                        break;
                    case 'a':
                        if (val = node.getAttr('_href')) {
                            node.setAttr({
                                'href': UE.utils.html(val),
                                '_href': ''
                            })
                        }
                        break;
                        break;
                    case 'span':
                        val = node.getAttr('id');
                        if(val && /^_baidu_bookmark_/i.test(val)){
                            node.parentNode.removeChild(node)
                        }
                        //将color的rgb格式转换为#16进制格式
                        if(me.getOpt('rgb2Hex')){
                            var cssStyle = node.getAttr('style');
                            if(cssStyle){
                                node.setAttr('style',cssStyle.replace(/rgba?\(([\d,\s]+)\)/g,function(a,value){
                                    var array = value.split(",");
                                    if (array.length > 3)
                                        return "";
                                    value = "#";
                                    for (var i = 0, color; color = array[i++];) {
                                        color = parseInt(color.replace(/[^\d]/gi, ''), 10).toString(16);
                                        value += color.length == 1 ? "0" + color : color;
                                    }
                                    return value.toUpperCase();

                                }))
                            }
                        }
                        break;
                    case 'img':
                        if (val = node.getAttr('_src')) {
                            node.setAttr({
                                'src': node.getAttr('_src'),
                                '_src': ''
                            })
                        }


                }
            }

        })


    });
};

/**
 * Created by zhangbo21 on 14-9-2.
 */
/*
 * getKfContent : 将image的src从base64替换为文件名
 * param : callback -- 回调函数 其参数为替换之后的内容
 * return : void
 * */

UE.Editor.prototype.getKfContent = function(callback){

    var me = this;
    var actionUrl = me.getActionUrl(me.getOpt('scrawlActionName')),
        params = UE.utils.serializeParam(me.queryCommandValue('serverparam')) || '',
        url = UE.utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);

    // 找到所有的base64
    var count = 0;
    var imgs =me.body.getElementsByTagName('img');
    var base64Imgs = [];
    UE.utils.each(imgs, function(item){
        var imgType = item.getAttribute('src').match(/^[^;]+/)[0];
        if ( imgType === 'data:image/png') {
            base64Imgs.push(item);
        }    
    });

    if (base64Imgs.length == 0){
        execCallback();
    } else {
        UE.utils.each(base64Imgs, function(item){

            var opt ={};
            opt[me.getOpt('scrawlFieldName')]= item.getAttribute('src').replace(/^[^,]+,/, '');
            opt.onsuccess = function(xhr){
                var json = UE.utils.str2json(xhr.responseText),
                    url = me.options.scrawlUrlPrefix + json.url;

                item.setAttribute('src', url);
                item.setAttribute('_src', url);

                count++;

                execCallback();
            }
            opt.onerror = function(err){
                console.error(err);
                count++;

                execCallback();
            }


            UE.ajax.request(url, opt);

        });
    }

    function execCallback(){
        if (count >= base64Imgs.length) {
            ue.sync();
            callback(me.getContent());
        }
    }

};

<!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: 820px;
            height:420px;
        }
        #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;
        }
        .kf-editor{
            width:100%;height:100%;
            min-width:760px;box-sizing: border-box;
            position: absolute;top: 0;left: 0;bottom: 0;right: 0;
            border:none;
        }
        .kf-editor-edit-area {
            width: auto !important;
            height: auto !important;
            position: absolute;top: 100px;bottom: 0px;left: 0;right:0;
        }
    
        .latex-editor{
            position: absolute;
            top:0;bottom:0;left:0;right:0;
        }
        .latex-editor .math{
            width:100%;height:100%;
            border:none;
            outline: none;

            padding: 1em;
            font-size: 16px;
            box-sizing: border-box;
            box-shadow: 0 0 10px rgba(0,0,0,0.1) inset;
        }
        .latex-editor .math:focus{
            box-shadow: 0 0 20px rgba(0,0,0,0.1) inset;
        }
        
        .latex-toggle{
            position: absolute;
            top: 5px;right: 5px;
            text-align: center;
            z-index: 20;
            padding:2px 1em;
            border-radius: 3px;
            cursor: pointer;
            
            color: #446;
            background: #fafafa;
            border: 1px solid #eee;
            user-select: none;
        }
        .latex-toggle:hover{border-color: #8fcc91;}
        .latex-toggle.active{
            color: #5fb162;
            background: #e0f0dd;
            border: 1px solid #8fcc91;
        }
        .hidden{display: none;}
    </style>
    <title></title>
</head>
<body>
<div id="kfEditorContainer" class="kf-editor">
    <div id="tips" class="tips">
        <div id="loading"><img src="kityformula/loading.gif" alt="loading" /></div>
    </div>
</div>

<script src="../../../../dist/vendor.js"></script>
<script src="../../../../dist/lib.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>
    $( 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) {
 	            window.kfe = this;
	            initEditView();
            });
        } else {
            $( "#tips").css( "color", "black" );
            $( "#tips").css( "padding", "10px" );
        }
    });

    var initEditView = function(){
        var math = window.defaultMath || "\\placeholder";
        kfe.execCommand('render',math);
        kfe.execCommand('focus');
        if(window.defaultMath){
            setValueMath(window.defaultMath,100);
        }
        
        var html  = '\
        <div class="latex-toggle">latex</div>\
        <div class="latex-editor hidden"><textarea class="math"></textarea></div>';
        $(html).appendTo('.kf-editor-edit-area');
        
    
        var $editor = $('.latex-editor');
        $('.latex-toggle').bind('click',function(){
            var isEdit = $(this).hasClass('active');
            if(isEdit){
                var value = $editor.find('.math').val();
                $(this).removeClass('active');
                $editor.addClass('hidden');
                kfe.execCommand('render',value);
            }else{
                var value = kfe.execCommand('get.source');
                $(this).addClass('active');
                $editor.removeClass('hidden');
                
                $editor.find('.math').val(value).focus();
                setTimeout(function() {
                    $editor.find('.math').focus();
                },20);
            }
        });
    }
    function setValueMath(math,delay){
        if(!kfe){
            window.defaultMath = math;
            return;
        }

        $('.kf-editor-canvas-container').hide();
        setTimeout(function(){
            $('.kf-editor-canvas-container').show();
            try {
                kfe.execCommand('render',math);
                // kfe.execCommand('focus');
            } catch(e) {}
        },delay || 400);
    }
    
    function getData(callback) {
	    if(kfe) {
	        kfe.execCommand('get.image.data', function(data) {
	            var latex = kfe.execCommand('get.source');
	            latex = latex.replace(/\\placeholder/g,'');
	            callback(data.img, latex);
	        });
	    } else {
	        callback(false)
	    }
	}
</script>
</body>
</html>

(function() {
	var pluginName = '插入公式';
	var baseURL = tinymce.baseURL;
	if(window.G && G.lang.indexOf("zh") === -1){
		pluginName ='Insert formula';
	}
	
	if(window.STATIC_PATH_ALL){
		baseURL = window.STATIC_PATH_ALL+'app/vender/tinymce';
	}
	var link = baseURL+'/plugins/kitymath/index.html';
    //公式编辑; http://www.wiris.com/editor/demo/en/developers 
    var open = function(editor){
        var dialog = editor.kitymathForm;
        if( dialog && dialog.$main){ //性能优化;再次打开不再从头初始化;
            var windowFrame = dialog.$main.find('iframe').get(0).contentWindow;
            dialog.display(true);
            if(editor.pluginMathValue){
                windowFrame.setValueMath(editor.pluginMathValue);
                editor.pluginMathValue  = false;
            }
            return;
        }
        
        var dialog = $.dialog.open(link, {
            title:pluginName,
            fixed: true,
            resize: true,
            ico:'<i></i>',
            lock: true,opacity:0.2,
            width: 800,height: 500,padding:0,
            ok: function () {
                windowFrame.getData(function(base64,math){
                    var html  = '<img src="' + base64 + '" data-latex="' + math + '"/>';
                    requireAsync([STATIC_PATH+'app/vender/markdown/katex/katex.min.js'],function(){
                        html = katex.renderToString(math,{throwOnError:false});
                        html = html.replace('<span class="katex">','<span class="katex" contenteditable="false" data-exp="'+math+'">');
                        html = '<span class="katex-box">'+html+"</span>";// 包裹一层,允许设置字体大小;
                        
                        dialog.display(false);
                        if(editor.pluginMathTarget){
                            $(html).insertBefore(editor.pluginMathTarget);
                            editor.pluginMathTarget.remove();
                            editor.pluginMathTarget = false;
                        }else{
                            editor.insertContent(html);
                        }
                    });
                });
                return false;
            },
            cancel: function(){
                dialog.display(false);
                return false;
            }
        });
        dialog.$main.css({'min-height':'560px','min-width':'800px'});
		
		// 绑定打开依赖链关系;
		$.formPopTarget($(editor.editorContainer),dialog.$main).show();
        
        editor.kitymathForm = dialog;
        var windowFrame = dialog.$main.find('iframe').get(0).contentWindow;
        windowFrame.defaultMath = editor.pluginMathValue;
        editor.pluginMathValue  = false;
    }

    var register = function(editor) {
        editor.addCommand('mceKitymath',function(){
            open(editor);
        });
        editor.ui.registry.addButton("kitymath", {
            icon:"math",
            tooltip:pluginName,
            onAction: function(){return open(editor);}
        }), 
        editor.ui.registry.addMenuItem("kitymath", {
            icon:"math",
            text:pluginName,
            onAction: function(){return open(editor);}
        });
        editor.on('DblClick',function(e){
            var $text = $(e.target).parentNode('.katex');
            if(!$text) return;
            editor.pluginMathTarget = $text;
            editor.pluginMathValue  = $text.attr('data-exp');
            open(editor);
        });
    };

    tinymce.util.Tools.resolve('tinymce.PluginManager').add('kitymath',function(editor) {
        register(editor);
        return {};
    });
}());