angularjs中使用ueditor遇到的一个问题

最新推荐文章于 2022-08-25 14:56:53 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2022-08-25 14:56:53 发布

阅读量610

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/qq_28259083/article/details/77059830

版权

angularjs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

ueditor是经过总公司二次开发过的。

增加了一个设置纸张大小的工具

/**
     * 设置纸张大小
     * 二次开发
     */
    UE.plugins['papersize'] = function () {
        var me = this;
        me.setOpt({ 'papersize': ['默认', 'A4', 'B5'] });

        me.commands['papersize'] = {
            execCommand: function (cmdName, value) {
                switch (value) {
                    case "A4":
                        //me.body.style.margin = "40px 93px 40px 93px";
                        //me.body.setAttribute("ue_paper", "trs_paper_A4");
                        $(me.body).removeClass("trs_paper_B5").removeClass("trs_paper_default");
                        $(me.body).addClass("trs_paper_A4");

                        break;
                    case "B5":
                        //me.body.style.margin = "40px 113px 40px 113px";
                        //me.body.setAttribute("ue_paper", "trs_paper_B5");
                        $(me.body).removeClass("trs_paper_A4").removeClass("trs_paper_default");
                        $(me.body).addClass("trs_paper_B5");
                        break;
                    default:
                        //me.body.style.margin = "40px 23px 40px 23px";
                        //me.body.setAttribute("ue_paper", "trs_paper_default");
                        $(me.body).removeClass("trs_paper_A4").removeClass("trs_paper_B5");
                        $(me.body).addClass("trs_paper_default");
                }
                return true;
            },
            queryCommandValue: function (cmdName) {//查询当前纸张大小
                var nowSize;
                UE.utils.each(me.body.classList.toString().split(" "), function (cls) {
                    if (cls.indexOf("trs_paper_") > -1) {
                        nowSize = cls.split("_")[2];
                    }
                });
                return nowSize == "default" ? "默认" : nowSize;
            }
        };
    };

并且在渲染的时候将body的宽度写死了

/**
             * 渲染编辑器的DOM到指定容器
             * @method render
             * @param { Element } containerDom 直接指定容器对象
             * @remind 执行该方法,会触发ready事件
             * @warning 必须且只能调用一次
             */
            render: function (container) {
                var me = this,
                    options = me.options,
                    getStyleValue = function (attr) {
                        return parseInt(domUtils.getComputedStyle(container, attr));
                    };
                if (utils.isString(container)) {
                    container = document.getElementById(container);
                }
                if (container) {
                    if (options.initialFrameWidth) {
                        options.minFrameWidth = options.initialFrameWidth
                    } else {
                        options.minFrameWidth = options.initialFrameWidth = container.offsetWidth;
                    }
                    if (options.initialFrameHeight) {
                        options.minFrameHeight = options.initialFrameHeight
                    } else {
                        options.initialFrameHeight = options.minFrameHeight = container.offsetHeight;
                    }

                    container.style.width = /%$/.test(options.initialFrameWidth) ? '100%' : options.initialFrameWidth -
                        getStyleValue("padding-left") - getStyleValue("padding-right") + 'px';
                    container.style.height = /%$/.test(options.initialFrameHeight) ? '100%' : options.initialFrameHeight -
                        getStyleValue("padding-top") - getStyleValue("padding-bottom") + 'px';

                    container.style.zIndex = options.zIndex;

                    var html = (ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                        '<html xmlns=\'http://www.w3.org/1999/xhtml\'><head>' +
                        /*
                        '<style type=\'text/css\'>' +
                        //设置四周的留边
                        '.view{padding:0;word-wrap:break-word;cursor:text;height:90%;overflow:hidden;padding:30px 85px 30px 85px}\n' +
                        //设置默认字体和字号
                        //font-family不能呢随便改，在safari下fillchar会有解析问题
                        'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
                        //设置段落间距
                        'p{margin:5px 0;}</style>' +
                        */
                        //默认引入iframe.css样式
                        (options.iframeDefaultCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeDefaultCssUrl) + '\'/>' : '') +

                        (options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '') +
                        (options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +
                        '</head><body class=\'view TRS_UEDITOR trs_paper_default\' >' +
                        //'</head><body class=\'view \' >' +
                        '</body>' +
                        '<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '') + ' id=\'_initialScript\'>' +
                        'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' +
                        'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';
                    container.appendChild(domUtils.createElement(document, 'iframe', {
                        id: 'ueditor_' + me.uid,
                        width: "100%",
                        height: "100%",
                        frameborder: "0",
                        //先注释掉了，加的原因忘记了，但开启会直接导致全屏模式下内容多时不会出现滚动条
                        //                    scrolling :'no',
                        src: 'javascript:void(function(){document.open();' + (options.customDomain && document.domain != location.hostname ? 'document.domain="' + document.domain + '";' : '') +
                        'document.write("' + html + '");document.close();}())'
                    }));
                    container.style.overflow = 'hidden';
                    //解决如果是给定的百分比，会导致高度算不对的问题
                    setTimeout(function () {
                        if (/%$/.test(options.initialFrameWidth)) {
                            options.minFrameWidth = options.initialFrameWidth = container.offsetWidth;
                            //如果这里给定宽度，会导致ie在拖动窗口大小时，编辑区域不随着变化
                            //                        container.style.width = options.initialFrameWidth + 'px';
                        }
                        if (/%$/.test(options.initialFrameHeight)) {
                            options.minFrameHeight = options.initialFrameHeight = container.offsetHeight;
                            container.style.height = options.initialFrameHeight + 'px';
                        }
                    })
                }
            },

纸张样式

/*
 * 纸张设置样式 —— Start
 */
.trs_paper_default{
    width:777px;
    margin:40px auto;
}
.trs_paper_default2{
    width:700px;
    margin:40px auto;
}
.trs_paper_A4{
    width:637px;
    margin:40px auto;
}
.trs_paper_B5{
    width:597px;
    margin:40px auto;
}
/*End*/

然后，在另一个模块中编辑器的宽度不够，输入的时候body会滑动，因此需要在加载的时候修改iframe的默认样式。
在自定义指令的link方法中尝试修改body的宽度失败，应该在加载指令的时候，ue.ready(function () {})中修改

//动态加载指令
    function loadDirective() {
        LazyLoad.js(["./lib/ueditor_demo/ueditor2/ueditor.config.js?v=7.0", "./lib/ueditor_demo/ueditor2/ueditor.all.js?v=7.0", "./lib/ueditor_demo/js/bottom-menu.js"], function () {
            var ueditor = '<ueditor-for-order form="orderForm" versionid = "data.lastVersionid" list="formData"></ueditor-for-order>';
            ueditor = $compile(ueditor)($scope);
            $($(angular.element(document)).find('ueditorLocation')).append(ueditor);
            var ue = UE.getEditor('ueditor');
            // $scope.status.support.content = $scope.list.DOCCONTENT;
            ue.ready(function () {
               //设置iframe的body样式 $(ue.body).removeClass("trs_paper_default").addClass("trs_paper_default2");
                ue.addListener("keydown", function (type, event) {
                    if (event.keyCode === 13) {
                        //获取纯文本
                        // $scope.status.support.content = ue.getContentTxt();
                    }
                });
            });
        });
    }