Ueditor 添加插件

Posted 2020-08-16 小乔流水人家

代码是在 ueditor.all.js 中编辑 感觉提供的API文档有点操蛋 没有真正的可操作可显示的实例 

//读取模板 并展示和添加事件
UE.registerUI(‘app‘, function(editor, uiname){

        if(typeof getAppListUrl == ‘undefined‘)
            getAppListUrl = ‘‘;

        var dialogOptions = {

            // 指定弹出层路径
            iframeUrl: getAppListUrl,//引用外部模板 这个要事先定义
            // 编辑器实例
            editor: editor,
            // dialog 名称
            name: uiname,
            // dialog 标题
            title: ‘应用帮助‘,

            // dialog 外围 css
            cssRules: ‘width:783px; height: 386px;‘,
        }
        // 创建dialog
        var kfDialog = new UE.ui.Dialog(dialogOptions);

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

        var iconUrl = editor.options.UEDITOR_HOME_URL + ‘dialogs/quoteApp/document_quote.png‘;
        var tmpLink = document.createElement(‘a‘);
        tmpLink.href = iconUrl;
        tmpLink.href = tmpLink.href;
        iconUrl = tmpLink.href;

        var kfBtn = new UE.ui.Button({
            name:‘quote‘ + uiname,
            title:‘引用‘ + uiname,
            //需要添加的额外样式，指定icon图标
            cssRules :‘background: url("‘ + iconUrl + ‘") !important‘,
            onclick:function () {

                //渲染dialog
                kfDialog.render();
                kfDialog.open();
            }
        });

        return kfBtn;

    });

 

//ueditor全屏 在modal里失效了

 UE.registerUI(‘full‘, function(editor, uiname){


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

        var iconUrl = editor.options.UEDITOR_HOME_URL + ‘themes/default/images/full.png‘;
        var tmpLink = document.createElement(‘a‘);
        tmpLink.href = iconUrl;
        tmpLink.href = tmpLink.href;
        iconUrl = tmpLink.href;
       // console.log(document.getElementsByClassName("edui-for-editor"+uiname)[0].setAttr(‘style‘,‘float;left;‘));
        console.log(this);

        var kfBtn = new UE.ui.Button({
            name:‘editor‘ + uiname,
            title:‘editor‘ + uiname,
            //需要添加的额外样式，指定icon图标
            cssRules :‘background: url("‘ + iconUrl + ‘") !important;‘,
            parentStyle:null,
            iframeStyle:null,
//触发全屏
            onclick:function (e) {

                var parent = this.parents("",6);
                var parent2 = this.parents(".modal");
                var iframe = parent.getElementsByClassName(‘edui-editor-iframeholder‘)[0];

                var width = window.innerWidth - 80;
                var height = window.innerHeight - 30;
                var offsetX = parent2.offsetLeft/2;
                var offsetY = parent2.offsetTop/2 ;


                if(this.parentStyle == null)
                {
                    this.target.style.background = "#ffe69f";
                    this.parentStyle = parent.style;
                    parent.style = ‘width:‘ + (width+20) + ‘px;height:‘ + (height+20) + ‘px;position:fixed;left:-‘+offsetX+‘px;top:0px;z-index:9999;overflow-x:scroll;‘;
                }
                else
                {
                    this.target.style.background = "";
                    parent.style = this.parentStyle;
                    this.parentStyle = null;
                }

                if(this.iframeStyle == null)
                {
                    this.iframeStyle = iframe.style;
                    console.log(this.iframeStyle);
                    iframe.style =  ‘width:‘ + width + ‘px;min-height:‘ + height + ‘px;z-index:9999;overflow-x:scroll‘;
                }
                else
                {
                    iframe.style = this.iframeStyle;
                    console.log(this.iframeStyle);
                    this.iframeStyle = null;
                }

                //console.log(this.parentStyle);

            },
//简单查找父级元素
            parents:function(selector,num){
                num = num?num:1;
                var p = 1;
                //只考虑单个条件
                if(typeof selector != ‘string‘)
                    return false
                var node = ‘parentNode‘;
                var t = this.target;
                var ele = id = className = dot = pound = ‘‘;

                //取元素
                dot = selector.indexOf(‘.‘);
                pound = selector.indexOf(‘#‘);
                //无.和# 单纯是一个元素
                if(dot == -1 && pound == -1)
                    ele = selector;
                else if(dot == -1)//wu点
                {
                    ele = selector.substring(0,pound);
                    id = selector.substring(pound);
                }
                else if(pound == -1)//无#
                {
                    ele = selector.substring(0,dot);
                    classNmae = selector.substring(dot);
                }
                else if(dot < pound)//点在前
                {
                    ele = selector.substring(0,dot);
                    classNmae = selector.substring(dot);
                }
                else if(pound < dot)//#在前
                {
                    ele = selector.substring(0,pound);
                    id = selector.substring(pound);
                }



                var judEle = judDot = judPound = ‘‘;
                // t.push(node);
                while(true)
                {
                    //没有父节点就中断
                    if(!t[node])
                        break;
                    t = t[node];
                    judEle = ele.length == 0 || t.nodeName == ele.toUpperCase();
                    judDot = className.length == 0 || t.nodeName == className.toUpperCase();
                    judPound = id.length == 0 || t.nodeName == id.toUpperCase();
                    if(judEle && judDot && judPound)
                    {
                        if(p == num)
                            break;
                        else
                            p++;
                    }

                    //t.nodeName
                }

                // console.log(t.nodeName);
                if(t.nodeName == ‘#document‘)
                    return false;
                return t;

            }

        });

        return kfBtn;

    });

 

//自定义引用标题 要特定标题赋予class
    UE.registerUI(‘h2‘, function(editor, uiname){

        var iconUrl = editor.options.UEDITOR_HOME_URL +  ‘themes/default/images/h.png‘;
        var tmpLink = document.createElement(‘a‘);
        tmpLink.href = iconUrl;
        tmpLink.href = tmpLink.href;
        iconUrl = tmpLink.href;

        var kfBtn = new UE.ui.Button({
            name:‘custom‘ + uiname,
            title:‘自定义标题‘,
            //需要添加的额外样式，指定icon图标
            cssRules :‘background: url("‘ + iconUrl + ‘") !important‘,
            onclick:function () {

                 var target = editor.selection.getRange()[‘endContainer‘];
                editor.selection.getRange().selectNode(target).select();
                editor.execCommand(‘inserthtml‘, ‘<h2 class="page-header">‘+editor.selection.getText()+‘</h2>‘);

            }
        });

        return kfBtn;

    });