echajoa/common/daumeditor/js/trex/tool/background.js

(function() {
    TrexConfig.addTool(
        "background",
        {
            wysiwygonly: _TRUE,
            sync: _FALSE,
            status: _TRUE,
			needRevert: true,
            thumbs: Trex.__CONFIG_COMMON.thumbs
        }
    );

    var articleBackgroundColor;

    Trex.Tool.Background = Trex.Class.create({
        $const: {
            __Identity: 'background'
        },
        $extend: Trex.Tool,
        oninitialized: function() {
            /* button & menu weave */
            this.weave(
                new Trex.Button(this.buttonCfg),
                new Trex.Menu.ColorPallete(this.menuCfg),
                this.handler
            );
        },
        handler: function(color) {
            var self = this;
            var canvas = self.canvas;

            canvas.fireJobs("canvas.apply.backgroundcolor", color);
            canvas.history.saveHistory(
                {
                    backgroundColor: articleBackgroundColor,
                    backgroundImage: canvas.getStyle('backgroundImage')
                },
                {
                    backgroundColor: color,
                    backgroundImage: canvas.getStyle('backgroundImage')
                },
                function(data){
                    self._restoreColor(data);
                }
            );
			if (color === null) {
				canvas.addStyle({
	                backgroundColor: canvas.getConfig().styles ? canvas.getConfig().styles.backgroundColor || "" : "",
	                backgroundImage: canvas.getConfig().styles ? canvas.getConfig().styles.backgroundImage || "" : ""
	            });
				articleBackgroundColor = "";
				canvas.getConfig().hasUserBgcolor = _FALSE;
			} else {
	            canvas.addStyle({
	                backgroundColor: color,
	                backgroundImage: ""
	            });
	            articleBackgroundColor = color;
	            canvas.getConfig().hasUserBgcolor = _TRUE;
			}
        },
        _restoreColor: function(data) {
            var canvas = this.canvas;
            canvas.addStyle({ backgroundColor: data.backgroundColor });
            if (data.backgroundImage) {
                canvas.addStyle({ backgroundImage: data.backgroundImage });
            }
            articleBackgroundColor = data.backgroundColor;
        }
    });

    Trex.install('canvas.getBgColor & canvas.setBgColor & editor.getContentWithBg',
        function(editor, toolbar, sidebar, canvas, config) {
            articleBackgroundColor = config.canvas.styles.backgroundColor;

            // 저장, 로드할때 content 수정
            canvas.getBgColor = function() {
                var color = articleBackgroundColor || canvas.getPanel("html").getStyle("backgroundColor");
                if ( color ) {
                    return Trex.Color.getHexColor(color);
                } else {
                    return "";
                }
            };

            canvas.setBgColor = function(color) {
                canvas.getPanel("html").addStyle({
                    "backgroundColor": color || 'transparent'
                });
            };

            editor.getContentWithBg = function() {
                var _selColor = canvas.getBgColor().toLowerCase();
                if(_selColor == 'transparent') {
                    return editor.getContent();
                } else {
                    return [
                        '<table class="txc-wrapper" border="0" cellspacing="0" cellpadding="0"><tr>',
                        '<td bgcolor="',_selColor,'">',
                        editor.getContent(),
                        '</td>',
                        '</tr></table>'
                    ].join("");
                }
            };

            var _originInitContent = canvas.initContent.bind(canvas);
            canvas.initContent = function(content) {
                if(content.search(/<table[^>]*txc-wrapper[^>]*>/i) > -1) {
                    var _selColor;
                    content = content.replace(/<table[^>]*txc-wrapper[^>]*><tr><td([^>]*)>([\s\S]*?)<\/td><\/tr><\/table>/i, function(full, color, html){
                        _selColor = color.replace(/\sbgcolor="([#\w]*)"/, "$1");
                        return html;
                    });
                    canvas.setBgColor(_selColor);
                }
                _originInitContent(content);
            };

            canvas.history.initHistory({
                'backgroundColor': config.canvas.styles.backgroundColor,
                'backgroundImage': config.canvas.styles.backgroundImage || "none"
            });

            canvas.reserveJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function() {
                var color = canvas.config.articleBackgroundColor;
                if ( color && color != "transparent" ){
                    canvas.addStyle({
                        backgroundColor: color,
                        backgroundImage: ""
                    });
                }
            });

            canvas.observeJob('canvas.apply.letterpaper', function(data){
                if ( data.id ){
                    canvas.getPanel("html").addStyle({
                        "backgroundColor": 'transparent'
                    });
                }
            });
        }
    );
})();