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

来源：互联网发布：直播点歌软件编辑：程序博客网时间：2024/06/02 01:58

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();                    }                });            });        });    }

阅读全文

0 0